Question

目前我正在为一个项目开发一个PSD设计，在这个设计中，一个部分有一个完全不同的形状，以吸引人的外观。

要创建该形状，我创建了一个svg文件并将其用作背景，并通过绝对属性定位该部分。在这个绝对定位部分之后还有另一个部分，需要在绝对部分之后。

为了对齐这个静态部分，我尝试使用“margin-top”属性。现在问题出现了。 margin-top属性正在影响绝对定位部分的“顶部”属性。 margin属性也在移动绝对定位元素位置以及t

这个问题令我感到困惑，我无法找到解决方案。

我在下面分享了一个描述问题的样本设计。

我希望我会对此查询得到积极回应。除了这种改进，关于设计开发的建议也将受到赞赏。

*{
   margin: 0;
   padding: 0;
}
			
#main-container{
   position: relative;
}
			
#section-1{
   background-color: #e48b21;
   height: 500px;
}
			
#section-2{
   height: 1000px;
   width: 100%;
   background-color: green;
   position: absolute;
   top: 70%;
}
			
#section-2 p{
   margin-top: 10%;
}
			
#section-3{
   background-color: #808080;
   margin-top: 70%;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Test 101</title>
	</head>
	
	<body>
		<div id="main-container">
			
			<div id="section-1">
				<p>Some Text</p>
			</div>
			
			<div id="section-2">
				<p>Some Text</p>
			</div>
			
			<div id="section-3">
				<p>Some Text</p>
			</div>
			
		</div>
	</body>
</html>

Answer 1

那是因为静态元素影响父级的高度，而绝对定位的元素按百分比定位。

您的#section-2的{{1}}值为top。那意味着;此元素的顶部将位于父级的70%高度（例如，父级为70%高，则此元素的顶部将位于100px）。现在，因为你的静态元素有一个上边距，它会拉伸父级（当然只有当它足够高时），这意味着70px在计算时会有更高的值。

为什么静态元素的“margin-top”属性会影响绝对元素的“top”属性？

1 个答案: