Question

这是我的代码......绝对位置内的绝对位置...当我给div position: relative;时，它会延伸到body标签，就像它是块级别一样，但是当它被赋予position: absolute;时，它看起来像一个内联级元素......我不明白为什么？

div {
  background: red;
  margin: 0 0 0 50px;
  font-size: 2em;
  position: absolute;
}

span {
  background: green;
  color: #fff;
  height: 100px;
  position: absolute;
  left: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ssss</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div>Begining <span>NORO</span> some text text text</div>
</body>

</html>

Answer 1

位置绝对收缩包裹元素并使其不占用文档正常流程中的空间。

Answer 2

快速，简单的搜索让我得到了这些可能的解释：

css-tricks说以下（absolute relative fixed positioning how do they differ）：

<强>相对即可。这种类型的定位可能是最令人困惑和误用的。它的真正含义是“相对于自身”。如果设置position：relative;在一个元素上但没有其他定位属性（顶部，左侧，底部或右侧），它根本不会影响它的位置，它将与您将其保持为position：static;但是如果你给它一些其他的定位属性，比如top：10px;，它会将它的位置从正常位置向下移10个像素。我相信你可以想象，基于常规位置移动元素的能力非常有用。（...）   设置位置时还会发生另外两件事：相对;在你应该知道的元素上。一个是它引入了在该元素上使用z-index的能力，这对于静态定位元素并不真正起作用。即使您未设置z-index值，此元素现在也将显示在任何其他静态定位元素的顶部。你不能通过在静态定位的元素上设置更高的z-index值来对抗它。另一件事是它限制了绝对定位的子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块中。这带来了一些我谈论here的强大机会。

<强>绝对即可。这是一种非常强大的定位类型，允许您将任何页面元素准确地放置在您想要的位置。您可以使用top，left，bottom定位属性。并设置位置的权利。请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父级，它将默认一直返回到元素本身，这意味着它将相对于页面本身放置。   关于绝对定位的权衡（以及最重要的事情要记住）是这些元素从页面上的元素流中移除。具有此类定位的元素不受其他元素的影响，并且不会影响其他元素。每次使用绝对定位时都要考虑这个问题。过度使用或不当使用会限制您网站的灵活性。

查看absolute positioning inside relative positioning时，您会看到当父元素（在您的情况下）得到position: relative时，跨度的行为/定位发生变化的确切原因。

希望这可以帮助您澄清行为。

绝对位置内的绝对位置：绝对定位父块的宽度

2 个答案: