css - 了解位置 :absolute

Question

以下来自this问题的最佳答案

Absolute CSS Positioning

position: absolute;

This tells the browser that whatever is going to be positioned should be removed from the normal flow of the document and will be placed in an exact location on the page. It won't affect how the elements before it or after it in the HTML are positioned on the Web page however it will be subject to it's parents' positioning unless you override it.

现在看下面的代码:

<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(恰好是其直接父级)定位 .我不明白为什么？

Answer 1

引用w3.org CSS2 spec section 9.8.4 :

The containing block for a positioned box is established by the nearest positioned ancestor

“最近定位的祖先”是任何非静态的父元素(position 的默认值)

编辑:

Further reading on MDN , MDN 是理解 CSS 规范的绝佳资源，它们使用比官方规范更通俗易懂的语言。