定位
基本思想:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS定位机制:普通流、浮动和绝对定位
在没有专门指定的情况下,所有的框都是处在普通流的定位中。普通流的元素位置由元素在(X)HTML中的位置决定。块级元素从上到下一个接一个地排列,框之间的距离由框垂直方向的外边距控制。行内元素在一行中水平布置,可以通过水平内边距、边框和外边距调整间距,但垂直内边距、边框和外边距不影响行内框的高度。一行形成的水平框称为行框,它的高度总是足以容纳它包含的所有行内框,设置行高可以增加这个框的高度。
用position属性可以规定元素的定位类型。
position:static
没有指定的情况下,元素position默认值为static,元素框正常生成,块级元素生成一个矩形框作为文档流的一部分;行内元素会创建一个或多个行框置于其父元素中。
div{
width: 200px;
height:30px;
line-height:20px;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
border:3px solid grey;
}
<div style="background-color:yellow">这是块1</div>
<div style="background-color:red">这是块2</div>
<div style="background-color:blue">这是块3</div>
<div style="background-color:gray">这是块4</div>
<div style="background-color:green">这是块5</div>
position:relative
元素相对于在正常流中的默认位置偏离某个距离,保留未定位前的形状,原本所占的空间仍然保留。
div{
width: 200px;
height:30px;
line-height:20px;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
border:3px solid grey;
}
.relative{
position: relative;
left:20px;
height: 30px;
}
<div style="background-color:yellow">这是块1</div>
<div class="relative" style="background-color:red">这是块2,positon:relative</div>
<div style="background-color:blue">这是块3</div>
<div class="relative" style="background-color:gray">这是块4,positon:relative</div>
<div style="background-color:green">这是块5</div>
position:absolute
元素框从文档流完全删除不占据空间,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就像不曾存在一样。不论原来是何种类型,定位后都生成一个块级框。
.absolute{
position: absolute;
left:20px;
height: 30px;
}
<div style="background-color:yellow">这是块1</div>
<div class="relative" style="background-color:red">这是块2,positon:relative</div>
<div style="background-color:blue">这是块3</div>
<div class="absolute" style="background-color:gray">这是块4,positon:basolute,没有设置z-index</div>
<div style="background-color:green">这是块5</div>
修改块4的z-index属性为-2
行内元素也可以设置
span{
width: 200px;
height:30px;
line-height:20px;
margin: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
border:3px solid white;
background-color: green;
}
<span style="background-color:yellow">这是块1</span>
<span class="relative" style="background-color:red">这是块2,positon:relative,z-index: -5;</span>
<span style="background-color:blue">这是块3</span>
<span class="absolute" style="background-color:gray">这是块4,positon:basolute,z-index: -2;</span>
<span style="background-color:green">这是块5</span>
position:fixed
fixed可以看作是absolute的子模块,它的包含块是视窗本身,相对于浏览器窗口进行定位。
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |