CSS如何设置绝对定位？

html-css029

CSS如何设置绝对定位？,第1张

使用绝bai对定位需要有一个参照，我先假设有du两个div分别为div1和div2吧，zhi绝对定位代码是position: absolute如果要以div1为参照dao物，就在div1里设position:relative在div2设position: absolute

1.兼容性不错的主流用法是：（但，这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。）

.conter{

width: 600pxheight: 400px

position: absoluteleft: 50%top: 50%

margin-top: -200px /* 高度的一半 */

margin-left: -300px /* 宽度的一半 */

}

2.CSS3的兴起，使得有了更好的解决方法，就是使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，可以这样

.conter{

width: 600pxheight: 400px

position: absoluteleft: 50%top: 50%

transform: translate(-50%, -50%) /* 50%为自身尺寸的一半 */

}

3.margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)

.conter{

width: 600pxheight: 400px

position: absoluteleft: 0top: 0right: 0bottom: 0

margin: auto /* 有了这个就自动居中了 */

}

4.使用css3盒模型:flex布局。（不考虑低版本浏览器的情况下）