今天复习了一下css的position属性,作为css中比较重要的属性,如果使用得当,那么页面布局将如虎添翼。它具有几个属性值,其区别如下:
值 | static | fixed | relative | absolute | inherit |
---|---|---|---|---|---|
定位 | 无定位(默认值) | 绝对定位(相对于浏览器边框) | 相对定位(相对于其正常位置进行定位) | 绝对定位(相对于 static 定位以外的第一个父元素进行定位) | 继承父元素的position属性值 |
是否脱离文档流 | 否 | 是 | 否 | 是 | 继承父元素的position属性值 |
特别地:
position: absolute 的定位,相对于 static 定位以外的第一个父元素进行定位,其理解为:
如果想要一个子元素相对于其父元素进行定位,则父元素应设置position为除了默认值static以外的值(如果为inherit则继承的值应为除了static以外的值),例如:子元素A希望相对父元素B进行定位,则将父元素B设置为position: relative;
如果父元素没有设置position属性,或者说设置为static(虽然一般没人这么无聊),那么该子元素则相对于层层向外遇到的第一个position不为static的父元素定位。
position: absolute对于用margin或者padding不好定位的情况有奇效。