3

可能重复：
位置：绝对没有设置上/左/下/右？

查看下面的代码，我有 div#box2 有 position: absolute 设置。它位于两个具有 position: static 设置的 div 之间。根据以下代码，我希望 div#box2 位于 body 元素的左上角。但是，当它被渲染时，它会收到一个将其置于 box1 下方的最高值。为什么会这样？

我知道当我明确地将 div#box2 的顶部值设置为 0px 时，它会出现在顶部。我只是不知道为什么浏览器一开始就没有计算到 0px 。

这是一些示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Position Test</title>
    <style type="text/css">
      body { background-color: #DEDEDE; }
      #content { border: solid; }
      #content div { height: 150px; opacity: .7;}
      #box1 { background-color: red; }
      #box2 { background-color: yellow; }
      #box3 { background-color: lightblue; }

    #content div { width: 150px; }
        #box2 { position: absolute; text-align: right;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="box1"><span>1</span></div>
      <div id="box2"><span>2</span></div>
      <div id="box3"><span>3</span></div>
    </div>
  </body>
</html>
4

2 回答 2

5

的默认值为top“ auto ”，而不是“0”（source），因此它不应位于<body>元素的顶部。

至于为什么“auto”翻译成“same position as if positionwas static”，请参阅关于定位的 CSS 规范（强调我的）：

对于绝对定位的元素，垂直尺寸的使用值必须满足这个约束：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom ' = 包含块的高度

如果'top'、'height'和'bottom'这三个都是'auto'：首先将'margin-top'和'margin-bottom'的任何'auto'值设置为'0'，然后设置'top'到静态位置，最后应用下面的规则三。

...

于 2012-07-26T15:22:59.570 回答
0

当一个元素被赋予绝对位置时，它将被从流中取出，从而允许将其他元素放置在它的上方或下方。如果没有显式设置顶部值，顶部值将保留元素位置，如果它没有从流中删除。

如果我们改变盒子的顺序，你可以看到这发生了，因为#box2它完全从流程中移除并位于外部，#content但仍然堆叠在它本来应该有的地方position:static

<!DOCTYPE html>
<html>
  <head>
    <title>Position Test</title>
    <style type="text/css">
      body { background-color: #DEDEDE; }
      #content { border: solid; }
      #content div { height: 150px; opacity: .7;}
      #box1 { background-color: red; }
      #box2 { background-color: yellow; }
      #box3 { background-color: lightblue; }

    #content div { width: 150px; }
        #box2 { position: absolute; text-align: right;}
    </style>
  </head>
  <body>
    <div id="content">
      <div id="box1"><span>1</span></div>
      <div id="box3"><span>3</span></div>
      <div id="box2"><span>2</span></div>

    </div>
  </body>
</html>
于 2012-07-26T15:25:12.553 回答