css的relative、absolute和float
2016-05-31 本文已影响0人
狐尼克朱迪
前言总结
- 绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中
- 浮动就是个带有方位的display:inline-block属性，absolute也是个inline-block化属性。
z-index
position:relative、position:absolute和position:fixed参与的情况下才有作用，表示层级
relative的特性
没有脱离正常的文档流，被设置元素相对于其原始位置而进行定位，其原始占位信息仍存在。
它可以提升元素的z-index层级，如下面的两列布局。如果左边不设置position:relative，会造成左边区域不可点击。
<div class="g-bd1 f-cb">
<div class="g-sd1">
<p>左侧定宽</p>
</div>
<div class="g-mn1">
<div class="g-mn1c">
<p>右侧自适应</p>
</div>
</div>
</div>
/* 两列右侧自适应布局 */
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:100%;}
.g-mn1c{margin-left:200px;}
absolute的特性
包裹性
简单点就是元素inline-block化，如一个div默认宽度为100%，一旦被设置absolute属性，那么100%默认宽度会变成内部自适应的宽度：
// html
<div class="div">
</div>
<div class="div absdiv">
</div>
// css
.div{
background-color: #0f9345;
padding: 20px;
margin: 10px 0;
}
.absdiv{
position: absolute;
}
得到的结果图：
normal和absolute
float也是典型的inline-block化，正常情况下我们要给行内元素设置宽高需要设置display：block属性，但是设置float或者absolute属性后，display：block就可以省了：
// html
<span class="normal">normal</span>
<span class="fl">float left</span>
<span class="abs">position absolute</span>
//css
.normal{
display: block;
width: 100px;
height: 100px;
background-color: red
}
.fl{
float: left;
width: 100px;
height: 100px;
background-color: yellow
}
.abs{
position:absolute;
width: 100px;
height: 100px;
background-color: green
}
Paste_Image.png
破坏性
浮动的破坏性在于切断line box链，致使高度塌陷，但其占据的实体位置还是在的。而absolute绝对定位不占据文档流的实体位置，因此会造成高度和宽度的塌陷。
// html
<div class="divdes">
</div>
<div class="divdes">
</div>
// css
.divdes{
padding: 20px;
margin: 10px;
float:left;
background-color: #0f9345;
}
.abs{
position: absolute;
}
Paste_Image.png
