position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型。
下面详细说一下各个属性的值。
absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位(没有的话相对于Body文档本身定位)。绝对定位的元素会脱离文档流的布局,遗留下来的空间由后面元素填充。绝对定位具有包容性和破坏性。
absolute的一些特性和使用技巧:
1.当行内元素设置绝对定位后可以设置width和height。
2.不和relative拴在一起的absolute更强大,比如独立的absolute可以摆脱overflow的限制,无论是滚 动还是隐藏。
3.无依赖的绝对定位的使用,即不受relative限制的absolute定位,不使用top/right/bottom/left任何一 个属性或使用auto作为值。它会表现为,脱离文档流,并且处在原来的位置。特性是去浮动(绝对定 位生效的时候浮动一定会失效)和位置跟随(原来在什么位置,绝对定位后还是在什么位置)。利 用无依赖的绝对定位,可以轻松实现图标和文字的对其,居中和边缘对其,下拉列表对其等效果。
4.如果有两个标签都有绝对定位,那后边的层级在前。所以没有必要设置多个z-index来确立层级关 系。
5.当绝对定位方向时对立的时候,即left,right一起存在,或是top,bottom一起存在的时候,结果不是 瞬间移位,而是标签的拉伸。即这个时候,absolute的定位可以和width/height相互替换。用这个 absolute定位方向对立时的拉伸特性,可以简单解决一些效果,例如,实现一个距离右侧200像素的 全屏自适应容器层。代码可以写为:position:absolute; left:0;right:200px;top:0;bottom:0;
注意事项:容器无需固定width/height值,内部元素亦可拉伸。就算父容器的height值为auto,只要 容器绝对定位拉伸形成,也可以支持百分比高度。当absolute拉伸和width/height尺寸同时存在时, width/height设置的尺寸大于left/top/right/bottom拉伸的尺寸。
relative:生成相对定位的元素,相对于其正常位置进行定位。不脱离文档流布局,只改变自身位置,在文档流原先的位置遗留空白区域。relative提高层叠上下文是最厉害的,别的方法都不如它。relative可以从各方面限制绝对定位,如:
1.限制left/top/right/bottom定位(绝对定位的元素只能在relative的容器范围内定位)。
2.限制z-index层级(绝对定位元素的层级受relative的容器的层级的影响)。
3.限制overflow下的表现(当最近的祖先容器设置了相对定位后,绝对定位元素会受overflow的影响)
4.对于fixed定位,只有z-index层级的限制起作用。
relative的使用原则
1.尽量避免使用relative
2.最小化使用原则(非要使用的情况下可以单独在外层加div标签设置relative)
fixed:生成固定定位的元素,相对于浏览器窗口进行定位。类似于absolute,但不随着滚动条的移动而改变位置。
static:默认值,没有定位,元素出现在正常的文档流中。忽略top,bottom,left,right或者z-index。
inherit:规定应该从父元素继承position属性的值。
感谢分享,了解到了