您的位置： >
CSS中Position 的用法
学习标签：
本文导读：用Div CSS进行网站布局时，做一些浮动层等特殊特殊效果时要考虑到定位问题。这就要用到Position属性等。Position属性有四个值：static、fixed、absolute和relative，后面两个在布局中的定位里是经常用到的。
position：static | relative | absolute | fixed
static ：默认值，无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。
relative：相对定位，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。
absolute：绝对定位，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：固定定位，对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
二、四个属性的详细介绍：
1、static，默认值
说到这里我们不得不提一下一个定义&&文档流，很多书对文档流这个概念只是一笔带过，没有详细解答，但我根据自己的经验和理解对它进行了总结，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。
默认值就是让元素继续按照文档流显示，不作出任何改变。
2、relative，相对定位
位置属性被设置为relative之后，是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。它可以随窗口大小变化。但大小仍然不会变。要是你设置成width:100%;height:100%;这样就会随着窗口变大变小。
比如：&div class=&1&&&/div&&div class=&2&&&/div&
当1固定了位置。1的样式& float:width:100 height:800
2的样式为&& float: position：relative；margin-left:20width:50
2的位置在1的右边，距离120px.
3、absolute，绝对定位
位置被设置为absolute后，被设置的元素会被定义到包含它的元素内的指定坐标（X坐标、Y坐标）。
比如：position：absolute；left:20top:80 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。它不会随着窗口大小变化，只是固定在一个特定的坐标轴上面；
4、固定位置，fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。但是目前它在IE6中不被支持，只有IE7和Firefox浏览器可以识别
三、position注意事项
1、当Position属性值为Relative时对象原来占有的位置保留，其后面的对象按原来文档流仍然保持原来的位置Top的值表示对象相对原位置向下偏移的距离bottom的值表示对象相对原位置向上偏移的距离两者同时存在时，只有Top起作用。left的值表示对象相对原位置向右偏移的距离right的值表示对象相对原位置向左偏移的距离两者同时存在时，只有left起作用。
2、当Position属性值为absolute时对象从文档流中抽取出来，原占有的位置被后面的对象顶替上来Top的值表示对象上边框与浏览器窗口顶部的距离bottom的值表示对象下边框与浏览器窗口底部的距离两者同时存在时，只有Top起作用；如果两者都未指定，则其顶端将与原文档流位置一致，即垂直保持位置不变。left的值表示对象左边框与浏览器窗口左边的距离right的值表示对象右边框与浏览器窗口右边的距离两者同时存在时，只有left起作用；如果两者都未指定，则其左边将与原文档流位置一致，即水平保持位置不变。
在Position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位，这对精确定位是很有帮助的。
五、positon 与 display
元素分为内联元素和区块元素两类（当然也有其它的），在内联元素中有个非常重要的常识，即内两元素是不可以设置区块元素所具有的样式，例如:width | height。
relative : 原来是什么类型的依旧是什么类型。
absolute | fixed ： 元素就被重置为了区块元素，例如：打算为span元素指定大小，并绝对定位
&span style=&position: width:100 height:50&&span&/span&这是完全正确的，
&span style=&position: display: width:100 height:100&&span&/span&，这里的display:block就是多余的了。
六、position 与 float
一个元素若设置了 position:absolute | 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是&定位流(这是自己起的名字，呵呵)&。
但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
您可能感兴趣
一月好评排行榜&&&&&&&&&&&&&&&&&&&&&&&& 0:04:46
&&网站联系: qq: email:&css里的position定位属性的使用_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
css里的position定位属性的使用
上传于||暂无简介
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
你可能喜欢CSS中定位position的使用
本文介绍了CSS中定位position的使用，毋庸置疑的是，pisition是css中是最重要的属性之一。尽管如此，对于初学者来说布局还是会有些混淆的。首先，什么是定位？当
毋庸置疑的是，pisition是css中是最重要的属性之一。尽管如此，对于初学者来说布局还是会有些混淆的。
首先，什么是定位？
当一个页面打开的时候，开始在html页面上布置元素（div、图像等）。定位可以帮你显示元素以及解决元素的重叠问题。有四种定位方式，static、relative、absolute、fixed。
默认的定位方式static
页面中所有的元素默认都是static的。静态定位意味着所有的元素都以代码顺序定位在页面上。块元素显示在块元素下面，行元素显示在行元素后面。
Relative positioning
设置定位为relative并不会在页面的现实上有太大的不同。但可以区别于普通定位方式，使用top、left、bottom、right的CSS属性。需要偏移、相对定位而不是固定在某个位置的时候，relative定位是非常有用的。
01 .relativeDiv{
04&&&&&&&& Moving the div to the top-left
05&&&&&&&& from where it would normally show:
06&&&&& */
08&&&& position:
09&&&& top:-50
10&&&& left:-100
Fixed positioning
给一个元素增加fixed定位，元素将相对浏览器窗口定位。fixed可以用来制作toolbars、button以及导航菜单menu，这些可以在一个固定的位置，随着页面一起滚动。
问题是，ie6等老的浏览器不支持。
01 .fixedDiv{
04&&&&&&&& Fixing the div 20 px from the bottom
05&&&&&&&& of the browser window:
06&&&&& */
08&&&& position:
09&&&& right:20
10&&&& bottom:20
Absolute positioning
一个absolutely的元素，在页面上相对于document或者一个非static的父元素。可以使用top、left、bottom和right这些css属性，可以精确定位元素。它支持水平和垂直居中。
01 .parentDiv{
03&&&& /* Absolute and Fixed positioning would work as well: */
05&&&& position:
07 .absoluteDiv{
10&&&&&&&& Displaying the div 50px from the right and 90px from
11&&&&&&&& the top of its parent because of the explicit positioning
12&&&&& */
14&&&& position:
15&&&& right:50
16&&&& top:90
使用定位，可以制作出各类高级布局的页面，这可以让你的页面设计上一个台阶。结合z-index的使用，可以改变默认的布局方式。代码中个，在后面的元素可以显示在前面元素的上方。
文章转载请注明来自：新辉网
标题：CSS中定位position的使用
原文地址：.cn/a/div-css/.html
(编辑：admin)
关键词：CSS,中,定位,CSS中定位position的使用
------分隔线----------------------------
万事开头难，零基础建站亦是这样，刚开始理念是不用他人模版、不备案、不放广告、不发..
日，综合性网址安全服务平台安全联盟全新改版，增加子频道http://zhanzhang..
经常在seo论坛里看到大师，高手的称号，也会提供很多教程和新手帮助。作为新手来讲，..
百度搜索引擎算法越来越严格，seo存在很多细节上的优化，很多时候站长的错误优化，导..
探讨下网站跳出率是否对百度排名有影响，那么影响有多大?..
07年阿里妈妈上线后，在网上炒的很热，一时间很多人都投入进来，本人是09年7月份接触..
------分隔线----------------------------css div中定位右下角为何需要父的position为relative_百度知道
css div中定位右下角为何需要父的position为relative
css div中定位右下角需要父的position为relative的原因是一般我们是相对一个DIV或者说是一个元素来定位，如果你不加的话，那就先对浏览器的左上角定位，效果是完全不同的，这里通过代码来理解:&html&
height:200
border:1px solid #f00;
height:100
//这样来写的css的我们通过的就不会是在浏览器的左上角，而是div的左上角
border:1px solid #f00;
}&/head&
&div class=&headr& &
//页头
&div class='wenzi'&
&p&我的数据&/p&
&/div&
&/div&
&/body&&/html&
其他类似问题
为您推荐：
提问者采纳
也可以是绝对定位，所以用相对定位是非常合适的（如果你另有其他需要，就参照离它最近的一个元素定位还有一个是“已定位”，这句话里有两个关键，并不需要A元素以及它周围的元素有所改变、爷爷的爷爷等等，但是它原来占的地方也不会让出来的，意思是那个参照元素不一定是父元素，一个是“离它最近的祖先元素”，为什么一般都是用相对定位呢，对这个有疑问吗哈哈，这样的好处是原来在它周围的其他元素不会因为它的离开而改变位置而使页面乱套，也可以是它的爷爷，这个定位也不一定非要是相对定位，因为在你这个例子里我们只是要让A作为B的一个参照偏移位置，因为相对定位的特性是虽然它定位了，就算给了偏移量它离开了原来的地方？其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”，如果它的祖先里同时有2个及以上的定位元素
提问者评价
很棒的解释，我会慢慢理解。谢谢！It's all for love --Michael Jackso
来自团队：
其他2条回答
然后B是一个小块，B就会相对于A进行移动，B的位置是在A元素里边的最右边和最下边。你上边的效果肯定是A是一个大块。这就是B相对于A进行移动的效果这两个是配合使用的，A定义了relative后
因为你设置为absolute之后，就会脱离原来的流，在网页中是不占位置的，而且是相对于浏览器来设置位置，只有设置绝对定位的父亲设置了相对定位，才会相对于父亲div来偏移位置。
如果我希望父div在网页中绝对定位，然后子div在父的div中，定位到相对于父div的一个位置（即以父div的左上角为坐标原点）。感谢！
relative的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁