第十八课程网站建设div+css当中的 Positioning属性定位的概念详细讲解

asp老师 · 发表于 2014-12-5 09:00:42

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 asp老师于 2014-12-5 09:45 编辑

static 是默认值没有定位元素出现正常的文本流里面
代码如下：

<title>无标题文档</title>
<style type="text/css">
#a{width:200px; height:150px; background:#F00; margin:0px auto;}
</style>
</head>
<body>
<div id="a"></div>
</body>

复制代码

fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过“left”,“top”,“right”以及“bottom”的属性进行规定。
absolute 定位：生成绝对定位的元素，超出原来文本流元素的位置通过“left”,“top”,“right”以及“bottom”的属性进行规定。
如果我们在<style tpye="text/css"></style>当中加入这样代码的话

#b{
width:200px;
height:200px;
background:#0F0;
position:absolute;
}

复制代码

我们来分析这个代码positon:absolute; 这个代码的意识就是让div的层随意浮动我们可以通过手动来设置这个div的位置，当然也可以我们通过来设置“left”,“top”,“right”以及“bottom”的属性进行规定。好此时我们来在positon:absolute; 后面写上如下代码

top:200px;
left:300px;

复制代码

那么此时的效果如下;

那么这个效果就是如下; 这个定位是对它的父框来定位的 ;

好我们来看positon:fixed; “left”,“top”,“right”以及“bottom”这样设置会出现什么情况呢/我们来看如下代码
我们通常要设置body的数值body{margin:0px 0px;} 这个是用来取消默认的浏览器8px的设置

<style type="text/css">
body{margin:0px 0px;}
#a{width:700px; height:500px; background:#F00; }
#b{width:200px; height:200px; background:#0F0; position:fixed; top:20px; left:5px;}
</style>
</head>

复制代码

这个代码：position:fixed; top:20px; left:5px; 这个表示的是相对于浏览器的窗口位置的，效果如下：

我们此时可以看到这个绿色div的效果，这个效果是随着浏览器进行浮动的，而不是通过div
如果我们此时修改为代码如下：把这个红色的div居中 margin:0px auto;

<style type="text/css">
body{margin:0px 0px;}
#a{width:700px; height:500px; background:#F00; margin:0px auto;}
#b{width:200px; height:200px; background:#0F0; position:fixed; top:20px; left:5px;}
</style>

复制代码

此时的效果如下：

那么我们经常会看到这样的方法用在网站当中的广告，例如我们网站的左侧用到的position:0px auto; 这样来出现的效果，可以随着滚动条来进行拖动但是会固定在浏览器当中同时他/她不会随着浏览器进行大小而进行缩放！

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！