绝对定位
position:absolute
设置为绝对定位的元素框将会从文档流中完全删除,并相对于其包含块(父元素)定位,包含块可能是文档中的另一个元素或者是初始包含块(body)元素。
绝对定位会脱离文档流,并且不占空间,普通文档流的元素的布局会认为绝对定位的元素不存在,所以绝对定位的元素可以覆盖在其他元素上,可以通过 z-index 来控制这些层的相应顺序。
<html>
<head>
<style type="text/css">
/* 由于 div1 没有已定位的祖先元素,所以此处以 body 为准 */
.div1{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left: 50px;
}
/* 以父类的位置为标准,也就是 div1 */
.div2{
width: 50px;
height: 50px;
background: gray;
position: absolute;
left: 50px;
top: 80px;
}
</style>
</head>
<body>
<div class="div1">
div1
<div class="div2">
div2
</div>
</div>
</body>
效果图:
效果图中,div2 的父元素是 div1 ,以 div1 为基准。div2 距离 div1 的 top 80px,left 50px 。
绝对定位不会占用原来的空间,以下面的代码生产的效果图示例:
<html>
<head>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
position: relative;
}
.div2{
width: 50px;
height: 50px;
background: gray;
position: absolute;
left: 20px;
}
#span1{
width: 100px;
height: 30px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<span id="span1">
1
</span>
</div>
</body>
</html>
效果图:
图中,灰色 div2 的框覆盖住了绿色的 span1 ,不在占用原来的空间
相对定位
position:relative
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
相对位置的坐标参考系是以自己上一次的位置作为原点参考,其实也就是相对于自己的位置。
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
left: 50px;
}
/* 自己的原本位置为标准,也就是左上角 */
.div2{
width: 50px;
height: 50px;
background: gray;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>
效果图:
相对定位是以它最初的位置为准,因为 div1(蓝色) 是父类,所以它最初位置在 div1 内,然后它距离左边 100px。
相对定位的元素,将会占用原来的空间,示例代码:
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.div1{
width: 100px;
height: 100px;
background: blue;
position: relative;
}
.div2{
width: 50px;
height: 50px;
background: gray;
position: relative;
left: 20px;
}
#span1{
width: 100px;
height: 30px;
background: green;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"> </div>
<span id="span1">
1
</span>
</div>
</body>
</html>
效果图:
如图说是,灰色的 div2 依旧占用着空间,所以 span1 只能放在下面
注意:
如果有文字的情况下,如果在有文字的范围内,那么长度或者高度要包括文字的长度和高度。在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
还有, 当 position:absolute 会改变 display 类型,也就是 inline-block 方式进行显示。
其他
- static(默认值)
- 该元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
- 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
- 表示没有定位
- fixed
- 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
- 固定定位的元素不会随浏览器窗口的滚动条滚动而变化,也不会受文档流动影响,而是始终位于浏览器窗口内视图的某个位置。
总结
相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块(body)。