1. 相对定位特性:
1.属于标准文档流 ,显示方式与原来没区别
2.相对自身原来位置进行偏移 , 不会对周边的元素造成影响(即使偏移,也会保留原位置)
3.(一般情况下不会给相对定位的元素使用偏移),"贡献"属性 它的实际用于给绝对定位做"嫁衣"
4.一般用于一些容器(父级容器,或者需要给绝对定位做参照的容器)
四个方向偏移: left / right / top / bottom
单位: px / 百分比 (相对于父容器宽度的比例)
.container {
width: 1000px;
height: 600px;
margin: 50px auto;
border: 1px solid red;
}
.box {
position: relative;
/*bottom:200px;*/
/*left:200px;*/
/*right:200px;*/
left: 50%;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box">box</div>
<p>相对自身原来位置进行偏移</p>
</div>
</body>2.相对定位特性:
1.使用绝对定位的元素会释放自身位置.
2.使用绝对定位的元素会形成"块级框".
3.(非固定)偏移默认以浏览边界作为参照进行偏移
4.参照对象:如果使用绝对定位的元素,能够从它的祖先级元素中,找到一个已经使用定位的元素,则以一个【最近】【已经定位:relative / absolute / fixed】的【祖先级元素】,作为偏移的参照对象,进行偏移 ,如果没有则浏览器边界为参照进行偏移.
5.常见问题：经常会忽略参照元素的相对定位 ，导致元素布局混乱。
四个方向偏移: left / right / top / bottom
单位: px / 百分比 (相对于父容器宽度的比例)
.container {
position: relative;
width: 1000px;
height: 600px;
margin: 50px auto;
border: 1px solid red;
}
.box {
position: absolute;
left: 400px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box">box</div>
<p>相对自身原来位置进行偏移!!!!!!!!!!!!!!!!!!!!!!!</p>
</div>
</body>3.固定定位特性:
1.释放当前位置 ,形成"块级框"
2.固定在浏览器窗口的某个位置(不会跟随网页的滚动而变化)
四个方向偏移: left / right / top / bottom
单位: px / 百分比 (相对于父容器宽度的比例)
.container {
position: relative;
width: 1000px;
height: 600px;
margin: 50px auto;
border: 1px solid red;
}
.box {
position: fixed;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="box">box</div>
<p>相对自身原来位置进行偏移!!!!!!!!!!!!!!!!!</p>
<div style="height:3000px;background:linear-gradient(to bottom,red,green);"></div>
</div>
</body>4.妙用: 让一个【已知宽高】的元素实现垂直和水平居中:
实现: 给元素设置绝对定位, left:50% , top:50% , 然后再设置外边距回去自身宽高的一半.
padding:0;
margin:0;
}
.box{
position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-100px;
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="box"></div>
</body>5. 需求: 让box 再container中水平和垂直居中?
/*
需求: 让box 再container中水平和垂直居中?
*/
.container{
position:relative;
width:1000px;
margin:0 auto;
height:600px;
border:1px solid red;
}
.box{
/*已知宽高:
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;*/
width:100px;
height:100px;
background-color:red;
}
#box1 .box{
/*解决方案一 : 使用css3 位移 (IE9+) **/
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /*css3 中的位移:以自身宽高为参照 **/
}
#box2{
/**解决方案二 : 使用css3 弹性盒子布局 : flex (IE10 +)**/
display:flex;
justify-content:center; /*水平居中*/
}
#box2 .box{
align-self:center;/*垂直居中**/
}
/**解决方案三: 使用表格布局 (表格中单元格默认垂直居中) (IE8+)
table > cell > 需要居中的盒子
**/
#box3{
display:table;/*1.设置显示方式为 表格**/
}
#box3 .td{
display:table-cell;/*2.设置显示为单元格 */
text-align:center;/**3.设置显示为水平居中*/
vertical-align:middle;/**4.设置显示为垂直居中*/
}
#box3 .box{
display:inline-block;/*5.设置显示为行内/行内块*/
}
</style>
</head>
<body>
<div class="container" id="box1">
<div class="box">方案1</div>
</div>
<div class="container" id="box2">
<div class="box">方案2</div>
</div>
<div class="container" id="box3">
<div class="td">
<div class="box">方案3</div>
</div>
</div>
</body>7.(只有使用定位的元素才有效)z-index 属性 : 用于设置多个定位层,重叠(z轴空间层)的上下次序, 数值默认为0 , 数值越大越再上面:
相对较大: 99
一层之下万层之上: 999
绝对的顶层:1000 / 9999
.mask {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
}
.box {
position: absolute;
z-index: 2;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="mask"></div>
</body>