css-相对定位和绝对定位相关问题

1.关于子元素设置margin-top会顶开父元素的上边距的原因：

   这个问题发生的原因是根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说了白点就是： 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素，祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级，假传圣旨，把自己的margin当领导的margin执行。 对于垂直外边距合并的解决方案上面已经解释了， 为父元素增加一个border-top或者padding-top即可解决这个问题。

 

2.绝对定位和相对定位

(1) 0绝对定位的lrtb四个方向的值要从body的padding开始算起，相对定位则去掉padding

(2)"position:absolute" 和 "position:fixed" 优先级最高，有它存在的时候，浮动不起作用，浮动或绝对定位的元素，会被转换成块级元素

(3)相对定位会原来的空间还存在着，兄弟元素会受它原来位置的影响，绝对定位进行定位时会将原来的位置清空

(4)只有垂直方向上的margin会发生层叠，水平方向上的margin永远不会发生层叠，浮动元素、inline-block 元素、绝对定位元素的 margin 不和垂直方向上其他元素的 margin 折叠

(5)fixed定位的元素其实就是absolute定位的一种特殊情况，只不过它的包含块是可视窗口，视觉上看就是一个元素固定在了当前窗口的某一个位置，并不会随着文档的滚动而移动

 

3.z-index属性只能在设置position情况下使用，设置层叠顺序越小越靠前，拒绝使用负数(IE不兼容)

转载于:https://www.cnblogs.com/TheProcess/p/6435309.html