CSS学习笔记-position
相信每一个前端新手都碰到过很头疼的问题,明明是把元素定位到这个位置,效果出来后却跑到了那个位置,设置其周围偏移后也没反应,感觉心好累。position属性定义建立元素布局所用的定位机制,只有把它整明白,定位的时候才能心想事成。
position可能的值
1.固定定位(fix) 相对于浏览器窗口定位,元素脱离正常流,元素的位置通过 "left", "top", "right" , "bottom" 和"z-index"属性进行规定。并且元素会生成一个块级框,而不论该元素本身是什么类型。
2.绝对定位(absolute) 相对于 static 定位以外的第一个父元素进行定位,元素脱离正常流。元素的位置通过 "left", "top", "right" , "bottom" 和"z-index" 属性进行规定。并且元素会生成一个块级框,而不论该元素本身是什么类型。
3.相对定位(relative) 相对于其正常文档流位置进行定位。元素在正常流中,其位置通过 "left", "top", "right" , "bottom" 和"z-index" 属性进行规定。因此,"left:20px" 会向元素原来位置右偏20px,由于相对定位元素未脱离正常流,刚才偏移的20px区间内没有任何内容。
4.静态定位(static) 默认值。没有定位,元素出现在正常的流中,忽略 top, bottom, left, right 或者 z-index 声明。
5.继承定位(inherit) 直接从父元素继承 position 属性的值。
实例操作
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<title></title>
</head>
<body>
<div class="content">
<div id="staticdiv1">
<span>static1</span>
<div id="fixdiv1">
<span>fix1</span>
</div>
</div>
<div id="relativediv1">
<span>relative1</span>
<div id="inheritdiv1">
<span>inherit1</span>
</div>
</div>
<div id="staticdiv2">
<span>static2</span>
<div id="absolutediv1">
<span>absolute1</span>
</div>
</div>
</div>
</body>
</html>
div{
float: left;
}
.content{
position: relative;
width: 600px;
height: 300px;
padding: 10px;
background-color: lightgray;
color: white;
font-size: 16px;
font-weight: bold;
}
#staticdiv1,#staticdiv2{
width: 200px;
height: 200px;
background-color: red;
}
#fixdiv1{
position: fixed;
top: 10px;
right: 100px;
width: 200px;
height: 200px;
background-color: green;
}
#relativediv1{
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: blue;
}
#absolutediv1{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: purple;
}
#inheritdiv1{
position: inherit;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: black;
}
上图是Chrome中看到的实际效果,所有div都添加了float属性,让所有元素显示在一行里面,更加直观,下面对其分别说明:
- 两个红色的static为默认position属性;
- 绿色的fix1父元素为static1,但因为是固定定位,所以跑到了浏览器的最右边;
- 蓝色的relative1在原来正常流中左边和上边分别偏移了100px;
- 黑色的inherit1继承了relative1的position属性,即还是relative,并top和right各偏移了100px;
- 紫色的absolute1可能需要特别留意,从html中可以看到,其父元素本来是static2,但static2是静态定位,所以absolute1最终相对于content定位。这里absolute和relative1的top都是100px,但absolute的位置要比relative1高一点,实际高10px,难道是因为content的margin问题,这里只能这样猜测了。
总结
通过上面的实例,只要把position的这几个属性放在一起对比,还是能很好理解不同属性之间的差异,帮助我们快速掌握。