绝对定位布局
通过设置position属性实现,能够实现横向多列布局及较为复杂的定位
拥有3种定位形式:
- 静态定位
- 相对定位
- 绝对定位
可设置4个属性值:
- static 静态定位
- relative 相对定位
- absolute 绝对定位
- fixed 固定定位
- absolute和fixed都属于绝对定位形式
- 静态定位是元素没有设置position定位的默认状态,元素还处于标准文档流中
相对定位
特点:
- 相对于自身原有位置进行偏移
- 相对定位的元素仍处于标准文档流中,会占据标准文档流的空间
(元素仍然保持其未定位前的形状,它原本所占的空间仍保留) - 随即拥有偏移属性和z-index属性
(元素仍然保持其未定位前的形状,移动元素会导致它覆盖其他框)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>绝对定位布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.div1{
background-color: red;
height:130px;
}
.div2{
background-color: blue;
height:150px;
position:relative;
top:50px;
left:20px;
}
.div3{
background-color: green;
height:130px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
效果如下图:
蓝块被设置相对定位后,相对自身原有位置进行偏移,原本所占的空间仍保留,并且浏览器会出现滑块。
绝对定位
特点:
- 相对于其包含块进行偏移
(包含块可能是文档中的另一个元素或者是初始包含块) - 脱离标准文档流,不占据空间
(原先在标准文档流中所占的空间会关闭,好像该元素原来不存在) - 随即拥有偏移属性和z-index属性
(不论原来它在正常流中生成何种类型的框,元素定位后生成一个块级框)
相对定位和绝对定位在标准文档流上的区别:
- 相对定位元素仍处于标准文档流中,占据空间
- 绝对定位元素脱离标准文档流,不占据空间
未设置绝对定位时:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>图片自适应</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.div1{
position:relative;
background: red;
height:300px;
margin:100px;
}
.div2{
background: blue;
height:300px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
效果如下图:
元素设置了绝对定位,未设置偏移量时:
.div2{
background: blue;
height:300px;
100%; /*新增*/
position:absolute; /*新增*/
}
效果如下图:
此时蓝块的初始位置不变,宽度继承自根节点<html>
,浏览器下方出现滑块。
绝对定位元素未设置偏移量的特点:
-
无论是否存在已定位的祖先元素,都保持在元素初始位置
-
宽度随着内容的变化而变化(类似于浮动时块的宽度),故记得设置width,否则当没有填充内容时,宽度为0。
1).若未填充内容,未设置宽度:看不见元素,width为0。与是否存在有已定位的包含元素无关
2).若填充内容,未设置宽度:width随内容而定。与是否存在有已定位的包含元素无关
3). 设置宽度,无论是否填充内容,- 若有已定位的包含元素:宽度为设置的固定值,或设置的百分数*包含的定位元素的宽度
- 若无已定位的包含元素 (包含元素未定位或定位元素不是包含的祖先元素):宽度为设置的固定值,或设置的百分数*html的宽度
元素设置偏移量时:
.div2{
background: blue;
height:300px;
100%;
position:absolute;
top:100px; /*新增*/
left:50px; /*新增*/
}
1.此时红块为设置了相对定位,且红块包含蓝块,所以蓝块设置绝对定位,相对于红块进行移动,效果如下:
2.若此时将红块不再设为relative相对定位,或是让红块不再包含蓝块,将蓝块设置为绝对定位,是相对于祖先元素<html>
进行定位,效果如下:
绝对定位元素设置了偏移量时的特点:
- 不存在已定位的祖先元素:以根节点
<html>
为偏移参照基准 - 存在已定位的祖先元素:以距其最近的已定位祖先元素为偏移参照基准
相对定位和绝对定位在偏移上的区别:
- 相对定位:“相对于”元素在文档中的初始位置。
- 绝对定位:“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
使用绝对定位实现横向两列布局:
常用于一列固定宽度,另一列宽度自适应的情况
主要应用技能:
- 对父元素使用相对定位–relative
- 对需要自适应宽度的元素使用绝对定位–absolute
注意:固定宽度的height > 自适应宽度的height
(原因:自适应宽度的div设置了absolute后,脱离标准文档流,无法将父元素的高度撑开)