CSS Position(定位)
在CSS中,我们是通过定位属性position来进行定位的,具体它有如下几个属性值。常见的属性有如下几个值描述。
1. positon:static; 静态定位(默认的 )
所有标准文档流中的元素都是静态定位
2. positon:relative; 相对定位
不脱离标准文档流,“老家留坑,形影分离”
特点:如果设置了相对定位并且设置了top、left、right、bottom属性,那么将来盒子会以盒子原来所在的位置进行偏移
相对定位的用途:一般不用于做“压盖效果”,就两个作用:
(1)微调元素
(2)绝对定位的参考,子绝父相
可以用left、right来描述盒子右、左的偏移;可以用top、bottom来描述盒子下、上的偏移
example:
<div class="plat">123</div>
<div class="content">456</div>
在CSS中
*{
margin:0;
padding:0;
}
.plat{
position:relative;
top:100px;
left:100px;
background-color: yellow;
width: 200px;
height: 200px;
}
.content{
background-color: red;
width: 200px;
height: 200px;
}
对div中的plat中的元素进行相对定位,position:relative,plat中的盒子保留了原来自己的位置进行移动,可是它原来的位置所占的空间还是保留的。所以红色的盒子不会霸占黄色盒子的位置。
3. position:absolute; 绝对定位
脱离标准文档流
特点:(1)如果这个元素没有父元素,那么将来top、left、right、bottom是相对于浏览器窗口来定位的
(2)如果绝对定位的元素有父元素,但父元素没有相对定位,那么这个时候top、left、right、bottom还是相对于浏览窗口来定位的
(3)如果绝对定位的元素有父元素,而且父元素有定位(非static),那么这个绝对定位的元素偏移是以自己的父元素为基础
(4)绝对定位之后的元素在页面上不会占据位置
example
<div class="plat">123</div>
<div class="content">456</div>
*{
margin:0;
padding:0;
}
.plat{
position:absolute;
top:100px;
left:100px;
background-color: yellow;
width: 200px;
height: 200px;
}
.content{
background-color: red;
width: 200px;
height: 200px;
}
对div中的plat中的元素进行绝对定位,position:absolute,plat中的盒子脱离了原来自己的位置进行移动,所以黄色盒子的位置就不会占位置。所以红色的盒子会霸占黄色盒子的位置。
4. position:fixed; 固定定位
脱离标准文档流
固定定位的用途:页面中的某些小广告,需要固定在页面中的一个位置不变
example:
<div class="content">8888</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
.content{
position:fixed;
right: 30px;
width: 200px;
height: 200px;
background-color: gray;
}
position:fixed;是作用就是它可以固定一个元素,不管浏览区怎么页面怎么缩放,它的位置都是固定不变的。