CSS如何进行绝对定位
- 清浅原创
- 2019-01-11 13:32:087822浏览
absolute属性表示绝对定位，通过top、left、bottom、right值来设置它们相对于最近的祖先元素的位置
【推荐课程：CSS教程】
绝对定位元素的位置与文档流无关，因此它不占据任何空间。当一个元素被设置为绝对定位时将会从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{width:100px;
height: 100px;
background-color: pink;
}
.child{
position: absolute;
background-color: skyblue;
top:50px;
left: 50px;
}
</style>
</head>
<body>
<div>父元素
<div>子元素</div>
</div>
</body>
</html>效果图：
由以上的示例可以看出绝对定位就是相对于最近的祖先元素，如果元素没有已定位的祖先元素，则会相对于最初的包含块（画布或HTML元素）
注意：绝对定位与文档流无关，所以它可以覆盖页面上的元素，所以我们可以设置z-index 属性来控制内容的堆放次序
以上是CSS如何进行绝对定位的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：如何实现首行缩进效果下一篇：CSS中添加阴影的方法有哪些