5

我一直在浏览Alistpart 上的 CSS Positions 文章。下面的片段引起了我的注意，无法理解背后的理论。

下面的 html/css 显示了两个盒子一个接一个。但是如果我将#box_1 的位置更改为绝对位置，那么#box_2 会与#box_1 重叠。

<!DOCTYPE html >
<html lang="en">
<head>
    <style>
        #box_1 { 
            position: relative;
            width: 200px;
            height: 200px;
            background: #ee3e64;
        }
        #box_2 { 
            position: absolute;
            width: 200px;
            height: 200px;
            background: #44accf;
        }
    </style>
</head>
<body>
    <div id="box_1"></div>
    <div id="box_2"></div>
</body>
</html>

  1. 另一个盒子 (box_1) 的位置如何影响不同/兄弟 div(box_2) 的位置。“绝对”不应该始终只对直接的非静态父级是绝对的吗？

  2. 在上面的css中（在box_1中带有“position：relative;”），如果我添加“top：0;” 到 #box_2，然后 box_2 似乎再次重叠。为什么会发生这种情况？

4

2 回答 2

4

如果您不指定其任何top、或属性，则绝对定位元素将保持在其静态位置right，无论其任何祖先是否已定位。这就是为什么当您简单地将其设置为时似乎没有发生任何事情的原因——相反，它受到的影响就像您没有指定.bottomleft#box_2position: absolute#box_1position: absolute

但是，请注意，仅因为 1 在 2 之前才会产生#box_1影响；#box_2一旦您绝对定位#box_2它，它就会从流程中取出，并且任何跟随它的兄弟姐妹都会像#box_2不再存在一样流动。请参阅此示例，其中我创建了一个#box_3与 相同的#box_1并将其添加到之后 #box_2，其中#box_3重叠#box_2是因为 3 在正常流程中看不到 2；它只看到 1。

一旦设置top: 0为#box_2，它就知道它必须附加到视口的顶部（作为它的包含块，因为它的祖先都没有被定位）。

于 2013-02-12T08:37:18.383 回答
0

div 上的 CSS 位置不影响兄弟划分的位置，但会影响子元素。例如：

HTML：

  <div id="parent_1">
     <div id="child_1"></div>
     <div id="child_2"></div>
  </div>

CSS：

  #parent_1{ 
        position: relative;
        width: 400px;
        height: 400px;
        background: gray;
    }
 #child_1 {
    position: absolute;
    left:20px;
    top:20px;
    width:40px; 
    background:yellow;
 }
#child_2 {
    position: absolute;
    right:20px;
    top:20px;
    width:40px; 
    background:blue;
 }

现在#parent_1将创建一个 400*400 的框，#child_1将放置在父 div 内，并将位于距左侧 20px 和距顶部 20px 的位置。

于 2013-02-12T08:53:10.767 回答