理解position:absolute

Question

以下是来自此问题顶部答案的内容。

绝对CSS定位

position: absolute;

这告诉浏览器将要定位的任何内容都应该从文档的正常流程中移除，并将放置在页面上的精确位置。它不会影响HTML中它之前或之后的元素在网页上的定位，但是它将受到其父级定位的影响，除非您覆盖它。

现在请看以下代码：

<div class="panel panel-primary">
        <div class="panel-heading">Panel with panel-primary class</div>
        <div class="panel-body">
          <span class="glyphicon glyphicon-circle-arrow-left"></span>
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <img src="../../favicon.ico">
          <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </div>
      </div>

如果我这样写：span{ position: absolute;}，结果如下图所示： 请注意箭头的位置，它们是相对于div.panel-heading或div.panel-primary定位的，但不是相对于div.panel-body（其恰好是它的直接父元素）定位的。我不明白为什么会这样？

- dasfdsa

---

因为您需要在父元素上设置 position: relative。 - Nenad Vracar

父元素的定位值会影响其子元素吗？ - dasfdsa

实际原因是图标的位置被Bootstrap覆盖了，所以你的问题基于错误的前提。 - Alohci

Answer 1

引用w3.org的话（CSS2规范9.8.4节）：

定位框的包含块是由最近的定位祖先元素建立的。

“最近的定位祖先”是指任何父元素，其position属性值为非static（即非默认值）。 编辑：

在MDN上进一步阅读，MDN是理解CSS规范的绝佳资源，它们使用比官方规范更简单的语言。

- cfreear

---

非常感谢您没有拐弯抹角地回答问题。 - dasfdsa

你能解释一下在设置了position: absolute之后，定位是如何发生的吗？我的理解是它会被放置在与position: absolute之前相同的位置。这个理解正确吗？ - dasfdsa

不，position:absolute 总是基于最近的非静态祖先更改位置。 position:relative 将元素放置在相同的位置，然后 top, right, bottom 和 left 将从此位置偏移（留下元素所在的空白）。 - cfreear

Answer 2

absolute ：将元素（包括子元素）完全从文档流中移除，并将其定位到指定的偏移位置。如果该元素嵌套在另一个定位元素中，则偏移量是相对于定位父元素计算的。否则，偏移量是相对于页面计算的。

在父元素上设置 position: relative 并查看结果。

- Ehsan

Answer 3

尽可能避免使用绝对定位。您可能需要的布局可以轻松地通过 flexbox 实现。

.panel-body {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="panel-body">
  <span class="glyphicon glyphicon-circle-arrow-left"></span>
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <img src="http://placehold.it/50">
  <span class="glyphicon glyphicon-circle-arrow-right"></span>
</div>

- Gerard

---

你是对的。谢谢，这对我非常有用，因为我最近正在学习CSS。 - dasfdsa