定位
是布局中的重要属性,一般用于盖压效果与位置相关效果。
position
给元素设置整体定位,必须同时存在position属性和偏移量属性。
属性值 | 说明 |
---|---|
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
偏移量属性
定位的元素,在水平或垂直方向需要偏移的距离。
- 水平:left、right
- 垂直:top、bottom
relstive(相对定位)
参考这个元素原始应该加载的位置。
相对定位没有脱离原始状态(标准流,浮动),它不会让出原来占有的位置,显示效果上,形影分离。
注意
:
- 偏移量区分正负(正数便宜方向和属性名相反,负数则反之)
- 水平和垂直方向上只能设置一个属性,若同时存在,则水平上以left为准,垂直上以top为准
- 相对定位参考自身位置,+left=-right,+top=-bottom
实际应用:
- 相对定位比较稳定,可以把相对定位作为绝对定位的参考元素
- 可以在占有原始位置的情况下,对加载效果区进行位置、文字的微调
案例:
/*实现导航栏鼠标移上后上方出现一个方框*/
*{
margin: 0;
padding: 0;
}
.nav{
height: 50px;
width: 1080px;
background: #9acfea;
margin: 100px auto;
}
.nav li{
list-style: none;
float: left;
width: 216px;
height: 50px;
}
.nav li a{
text-decoration: none;
display: block;
height: 50px;
text-align: center;
line-height: 50px;
border-right: 2px solid #fff;
color: #fff;
}
.nav li a:hover{
position: relative;
top: -4px;
border-top: 4px solid #5bc0de;
background: #2aabd2;
}
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">案例</a></li>
<li><a href="#">联系</a></li>
</ul>
absolute(绝对定位)
参考距离最近的有定位的
祖先元素,若没有则参考body,必须搭配偏移量才能使用
绝对定位脱离了标准流,让出原始位置,可设置宽高、随时定义位置,不设置高度只能被撑开
注意:
- 参考元素不固定,不同的参考元素和偏移值会有不同的表现效果
- 和相对定位不同,四个方向偏移量不再有关系,无法等价互换
参考点:
- 有top参与:参考点就是body或盒子的左上或者右上顶点
- 有bottom参与:参考点就是body或者盒子的左下或者右下顶点
实际工作不会以body作为参考元素
祖先级参考元素:
- 祖先级有定位属性:寻找最近含有定位属性的祖先元素
- 祖先元素设置了相对、绝对、固定定位:都可以当作子元素绝对定位的参考元素,一般使用
子绝父相
祖先元素参考点:
如果绝对定位参考元素是祖先级元素,参考点就是祖先盒子border的四个顶点,组合方式决定了参考点,绝对定位之关系子盒子和父盒子之间的距离,忽略padding区域。
偏移属性值 | 参考点 | 对比点 |
---|---|---|
left、top | 祖先元素的左上角(内容区域+padding) | 盒子自身左上角(包含margin) |
left、bottom | 祖先元素的左下角(内容区域+padding) | 盒子自身左下角(包含margin) |
right、top | 祖先元素的右上角(内容区域+padding) | 盒子自身右上角(包含margin) |
right、bottom | 祖先元素的右下角(内容区域+padding) | 盒子自身右下角(包含margin) |
案例:
/* 如果box1、2、3都没设置position那么就以body为参考元素
*/
.box1 {
width: 500px;
height: 500px;
border: 10px solid red;
margin: 100px;
position: relative; /* 只要有我在,上边设置了position也没用,也要以我为参考元素 */
}
.box2 {
width: 400px;
height: 400px;
border: 10px solid green;
margin: 40px;
position: absolute; /* 只要有我在,上边设置了position也没用,也要以我为参考元素 */
}
.box3 {
width: 300px;
height: 300px;
border: 10px solid blue;
margin: 40px;
position: fixed; /* 只要有我在,上边设置了position也没用,也要以我为参考元素 */
}
.me {
width: 50px;
height: 50px;
border: 10px solid yellow;
margin: 10px;
background: #cccccc;
position: absolute; /* 设置绝对定位和偏移量 */
top: 0;
left: 0;
}
<div class="box1">
<div class="box2">
<div class="box3">
<div class="me"></div>
</div>
</div>
</div>
fixed(固定定位)
参考元素只能根据浏览器窗口四个顶点
,位置根据偏移量决定,不随屏幕滚动
脱离标准流,可设置宽高、位置,参考元素是浏览器窗口,始终显示在窗口固定位置
.box {
width: 300px;
height: 300px;
margin: 20px;
background: #cccccc;
}
.txt{
/* 设置固定定位和偏移量 */
position: fixed;
right: 20px;
bottom: 20px;
border: 2px solid #9acfea ;
background: #2aabd2;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
<div class="txt">我是固定的</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
定位属性的应用:
CSS书写顺序(推荐):结构(display、宽高、浮动、定位等)>盒模型属性>背景属性>文字属性