本文深入探讨了CSS中的定位技术，包括相对定位、绝对定位和固定定位的原理及应用。相对定位保持元素在文档流中的位置，而绝对定位则基于最近的定位父元素进行定位。固定定位则是相对于浏览器窗口定位。此外，文中还介绍了多种元素垂直水平居中的方法，包括使用负margin和transform属性，以及利用Flexbox布局实现居中。这些技巧对于网页布局至关重要。
一、相对定位
1、属性： position
2、属性值：relative
①相对自身位置定位，不会脱离文档流
②配合top/left/right/bottom属性使用
二、绝对定位
1、属性：position
属性值：absolute
①定位参考对象为有定位的父级元素，如果父元级素没有定位则参考根元素
②配合方向属性left/right/top/bottom使用
③绝对定位会脱离文档流，不占位
④子绝父相
⑤层级顺序 z-index:number;数字越大在上层显示，默认值为0，可以写负值，需配合定位使用
⑥过渡：transition all 1s； 透明度 0-1； opacity：0；
三、元素垂直水平居中
第一种：
① .box 1{
position:relative;
}
box p {
position:absolute;
left:50%；
top：50%
margin-top：-50px;
margin-left:-50px;
}
第二种：
.box 2 {
position：relative
}
.box2 p {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
第三种:
.box3 {
变成容器：
display：flex；
主轴方向居中（默认为水平方向）：justify-content:center;
交叉轴方向居中（永远与主轴方向垂直）：align-items:center;
四、固定定位：
属性：position
属性值：fixed
①定位参考坐标为浏览器窗口
②配合top/bottom/left/right属性使用
③会脱离文档流，不占位
④边框圆角：border-radius：50%；
扫一扫
45
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
