一.position和float让元素脱离文档流
position和float的一个共同点是让元素脱离文档流
position的relative，absolute，fixed会激活left，right，top，bottom和z-index属性，
未定位元素(包括static)不支持这些属性，设置了也无效
float脱离文档流，不能使用z-index分层
二.position
CSS定位属性允许你为一个元素定位(position)。它也可以将一个元素放在另一个元素后面(z-index)，并指定一个元素的内容太大时，应该发生什么。
元素可以使用的left，right，top和bottom属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法.
1.static
HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
2.fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。
下面是一个导航条示例，固定在顶部，窗口上下滚动时一直固定在顶部
.nav{
position: fixed;
top:0;
height: 40px;
background: #808080;
width: 100%;
}
.item1,.item2,.item3{
height: 40px;
line-height: 40px;
color:#fff;
display: inline-block;
width: 100px;
border-right: 1px solid #eee;
text-align: center;
}
<div class="nav">
<div class="item1">
首页
</div>
<div class="item2">
JavaScript
</div>
<div class="item3">
Python
</div>
</div>
fixed.png
3.relative
相对定位元素的定位是相对其正常文档流位置定位。
相对定位会保留自己在z-index:0层的占位(无论是否设置新的z-index)，left、top、right、bottom值是相对于自己在设置的z-index层的位置
.container{
background: #eee
}
.testRelative1{
position: relative;
background: #eeeb38;
top:150px;
left: 100px;
height: 100px;
width: 100px;
z-index: -1;
}
.testRelative2{
position: relative;
background: #87ee98;
top:50px;
left: 200px;
height: 100px;
width: 100px;
z-index: 1;
}
<div class="container">
<div class="testRelative1">
test1
</div>
<div class="testRelative2">
test2
</div>
</div>
test1的正常文档流是top:0，left:0，宽高都为100px，z-index:0
test2的正常文档流是top:100px(test1高度)，left:0，z-index:0
container的高度为200px(由test1，test2撑起)
当test1设置了相对定位后，test1和test2的left，top相对于自己的正常文档流算起，保留了z-index:0的占位，因此container不会“塌陷”；此时层叠层次为三层：test1最低层(z-index:-1)，container中间层(z-index:0)，test2最上层(z-index:1)
relative.png
4.absolute
绝对定位的元素的位置相对于最近的已定位父元素(relative和absolute)，如果元素没有已定位的父元素，那么它的位置相对于<html>
Absolutely定位使元素的位置与文档流无关，因此不占据空间(不保留z-index:0空间)。
Absolutely定位的元素和其他元素重叠。
.container{
background: #eee
}
.relative{
position: relative;
background: #eeeb38;
top:100px;
left: 100px;
height: 100px;
width: 100px;
}
.absolute{
position: absolute;
top:50px;
height: 100px;
width: 100px;
left:50px;
background: #cc4f28;
}
<div class="container">
<div class="relative">
<div class="absolute">
test
</div>
</div>
</div>
absolute.png
三.float
Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
1.文字绕浮动元素排列
.container{
background : #eee;
width : 140px;
}
.float{
float: left;
width: 100px;
height: 100px;
background: #46EE24;
}
<div class="container">
<div class="float">
浮动块
</div>
<div>
未浮动元素会环绕浮动元素排列
</div>
</div>
文字环绕.png
2.父元素“塌陷”
.container{
margin-top: 50px;
background : #eee;
width : 400px;
}
.float{
float: left;
width: 200px;
height: 200px;
background: #ee8b27;
}
.next{
background : #15cc7a;
width : 400px;
height: 200px;
}
<div class="container">
<div class="float">
浮动块
</div>
<p>浮动元素不会“撑起”父元素,父元素的兄弟元素会排列受影响</p>
</div>
<div class="next">
位置不是期望的浮动块下面
</div>
父元素塌陷.png
3.清除浮动
使用clear清除浮动
.container{
margin-top: 50px;
background : #eee;
width : 400px;
}
.float{
float: left;
width: 200px;
height: 200px;
background: #ee8b27;
}
.next{
background : #15cc7a;
width : 400px;
height: 200px;
}
<div class="container">
<div class="float">
浮动块
</div>
<p style="clear: both">清除浮动会“撑起”父元素,父元素的兄弟元素会排列不受影响</p>
</div>
<div class="next">
位置是期望位置
</div>
清除浮动.png
网友评论