猿问

为什么我把这个div设置绝对定位,他的父容器位置会变化?

如题,我把第9和第12个方块设置为绝对定位,可是为什么父容器container会向下挪?
你可以试试,把其他的子div也改一下,父容器为什么会变位置


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小练习5</title>
	<link rel="stylesheet" type="text/css" href="practice5.css">
</head>
<body>
	<div class="container">
		<div class="draggable">1</div>
		<div class="draggable">2</div>
		<div class="draggable">3</div>
		<div class="draggable">4</div>
		<div class="draggable">5</div>
		<div class="draggable">6</div>
	</div>
	<div class="container">
		<div class="draggable">7</div>
		<div class="draggable">8</div>
		<div class="draggable" style="position: absolute;">9</div>
		<div class="draggable">10</div>
		<div class="draggable">11</div>
		<div class="draggable" style="position: absolute;">12</div>
	</div>
	<script type="text/javascript" src="practice5.js"></script>
</body>
</html>

//下面是css

*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
.container{
	width: 200px;
	height: 400px;
	border: 1px solid black;
	display: inline-block;
	margin: 40px;
}
.container div{
	width: 200px;
	height: 40px;
	display: inline-block;
	border: 1px solid black;
	background-color: #c55342;
}

newsudhc3634140
浏览 5707回答 7
7回答

郭某某

解决了吗

Sarah12138

设置绝对定位后的元素,其父容器如果没有清除浮动,那么父容器的高度就会塌陷。你设置了两个子元素绝对定位,而且又为父容设置了器高度,而那两个子元素已经脱离了正常文档流,所以父容器就只有往下移两个子元素的高度了。

qq_拂风倾城_0

看懂了!其实我是来测试这个评论框的

next站点

你绝对定位后下面的方块已经顶上去了啊,只不过被绝对定位的数字盖住了,你的数字10你没发现没有了吗?父容器应该和里面的子容器绝对定位没关系

元歌

css中的绝对定位会脱离文档流,因此不占据空间,有层级关系,你可以先了解一些关于绝对定位与相对定位,还有float的区别,你就可以很好的理解。
随时随地看视频慕课网APP
我要回答