css position: relative | absolute | static | fixed详解

时间:2024-08-22 18:37:38
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级。
fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。


CSS2.0 HandBook上的解释:
        设置此属性值为absolute 会将对象脱离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外边距( margin ),但仍有内边距( padding )和边框( border )。
        要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。 

属性(top、right、bottom、left简称trbl)只有当设定了position属性才有效。
px;"> 此层只应用position:absolute;bottom:30px;样式 </div>
</div>
</body>
</html>
id为rel的层,不受影响,以自身的占位为基线做偏移! 
id为abs的层是以id为posi层的底边做为定位基线,如果此时posi层的高度小于30px的话,abs层可能没办法看到!