Css绝对定位技巧

 

1.子绝父相

在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位的，虽然给父元素的position设置relative、absolute、fixed都可以，但是如果不希望父元素脱标，常用解决方案是：

 

父元素设置position: relative;（让父元素成为定位元素，又不脱离标准流）；

 

子元素设置position: absolute;；

 

2.绝对定位元素的公式应用

 

绝对定位元素（absolutely positioned element）：position值为absolute或者fixed的元素，因为absolute在没有找到祖先定位元素时，也是参考视口进行定位的，和fixed的效果一样。

 

对于绝对定位的元素，会满足以下两个公式：

 

定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素实际占用宽度；

 

定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素实际占用高度；

 

如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性，这也是为什么定位能够实现盒子的水平垂直居中。

 

left、right、top、bottom全部设置为0，margin设置为auto；

 

根据上面公式，margin + 绝对定位元素实际占用宽高 = 定位参照对象的宽高，盒子自然就水平垂直居中显示了