Question

我是网络开发的新手。我对元素的定位有一些疑问。

当我运行以下代码时，黑色背景元素位于红色背景元素内。

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="position: absolute;left:100px;top: 100px;height:600px;background-color: yellow;width: 600px;">
		<div style="position:relative;left:100px;top:100px;height:200px;width:500px;background-color: red;">
		</div>
		<div style="position:relative;left:100px;top:50px;height:10px;width:10px;background-color: black;">
		</div>
	</div>
</body>
</html>

＆＃13;

但是如果我将红色矩形的位置设为绝对，则黑色矩形移动到正确的位置，从其父级（黄色矩形）保持正确的左侧和顶部。谁能告诉我为什么会那样？即使红色矩形的位置是相对的，如何使黑色矩形从其父级（黄色矩形）正确定位自己。

由于

Answer 1

relative定位会在页面上保留元素，以便其位置受到其他static和relative定位元素的影响。如果您希望黑盒相对于黄色框定位，则需要制作黑框position: absolute。 absolute定位元素将相对于其最近的非static定位祖先定位。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div style="position: absolute;left:100px;top: 100px;height:600px;background-color: yellow;width: 600px;">
    <div style="position:relative;left:100px;top:100px;height:200px;width:500px;background-color: red;">
    </div>
    <div style="position:absolute;left:100px;top:50px;height:10px;width:10px;background-color: black;">
    </div>
  </div>
</body>

</html>

＆＃13;

CSS位置相对和绝对

1 个答案: