CSS定位相对于固定/绝对

Question

抱歉，如果我对 CSS 显得很“笨拙”。我一直在尝试设置以下...

#0 {
 width: 100%;
 height: y;
 border: 1px solid black;
}   
#a {
 position: fixed;
 float left;
 width: x;
 height: y;
 border: 1px solid black;
}
#b {
 position: relative;
 float: left;
 width: x;
 height: y;
 border-right: 1px solid black;
}

/* HTML */
<div id="0">Some div...</div>
<div id="a">Another div</div>
<div id="b">Final div...</div>

由于某种原因，如果我尝试将 #b 定位在 #a 下方，#b 将出现在 #a 的顶部，除非我将其位置声明为静态或绝对，但随后需要手动定位顶部/左侧属性，并且这也不能在所有浏览器中正确显示。任何帮助将不胜感激！

现在修好了！ (必须声明 html, body:( width: 95%;)) 感谢所有的建议！

Answer 1

首先，修复几个问题：#0 需要命名为其他名称，因为 ID 不能以数字开头。您还缺少 : 在 #a 的 float 属性中。不确定高度/宽度的“x”和“y”是什么 - 我认为这些只是示例？

Fixed 和 Absolute 元素不在文档流中。也就是说，它们不会像普通定位元素那样占用空间。

因此，在您的示例中，固定元素将具有相对元素，正如您发现的那样，因为它们可以位于相同的 x-y 空间中。如果你认为它是绝对的，top:0; left: 0，同样的事情也会发生。

接下来，你有一个作为浮动（几乎），所以让我们考虑浮动改变了所有的定位。花车的布局方式是“特殊的”。它们在流动中，但会尽可能地向上并在浮动方向上。如果它们太宽而无法与该行上的其他浮动内容相邻，它们会转到下一行。

你可以的

<style>
 #a
  {
  float:left;
  height:100px;
  width:150px;
  background-color:black;
  }
  #b
  {
  clear:left;
  height:100px;
  width:150px;
  background-color:green;
  }
 </style>
 <div id='a'>aaaaa aaa</div>
 <div id='b'>bbb bbb</div>

'Clear' 表示一个元素将出现在前面浮动的元素之下。 #b 将在下一行，在#a 下方。您还可以使#a 在右侧有一个很大的边距，或者足够宽以填充任何容器并且不为#b 留出空间，以使#b 在#a 下方而不是在它旁边。

Answer 2

我认为您的 width: x 和 height: y 语法不正确，并且您的 #a float 属性缺少冒号。此外，ID 不能以数字开头，因此应将#0 更改为其他内容。这是使一切正常的代码。你必须摆脱你的固定和相对定位。 CSS：

#zero {
 width: 100%;
 border: 1px solid black;
}   
#a {
 float: left;
 border: 1px solid black;
}
#b {
 float: left;
 border-right: 1px solid black;
}

还有 HTML：

<div id="zero">Some div...</div>
<div id="a">Another div</div>
<div id="b">Final div...</div>