CSS中绝对定位解释

最新推荐文章于 2022-08-12 13:51:43 发布

dawn4317

最新推荐文章于 2022-08-12 13:51:43 发布

阅读量501

点赞数

分类专栏： css 文章标签： css绝对定位绝对定位居中 div嵌套底部

本文链接：https://blog.csdn.net/dawn4317/article/details/47747121

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

w3school中有这样一句话“绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块”

什么是已定位的祖先元素，经查阅资料及测试，已定位的祖先元素就是有position属性，且position的值为absolute或者relative的父元素。

什么是最初的包含块，即html画布（看起来也就是body区域）。

之前遇到一个问题，两个div嵌套，怎么使第二个div总是在第一个div的底部并且居中？

要在底部就用到了绝对定位，让第一个元素position的值为absolute或者relative，第二个元素的position属性值为absolute，且设置bottom为0px即可。

要居中，我们可以设置left: 50%; margin-left: -第二个div宽度一半px;

最好让第一个元素的postion的值为relative，这样的话，它还占据文档流，如果设置为absolute的话，他就不再占据文档流，对后面的标签的布局将会产生比较大的影响。

示例代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>
<style>   

.div1{width: 1000px;height: 500px; border: 5px solid red;position: relative;  margin: 0 auto; }   
.div2{width:500px; height: 20px; border: 5px solid red; position: absolute;bottom: 0px; left: 50%; margin-left: -250px; }   
</style>

</head>
<body>
<div class="div1">
	测试一下
	<div class="div2">2222</div>
</div>
</body>
</html>