html - 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”是什么 - 我认为这些只是示例？

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

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

接下来，你有一个 float (几乎)，所以让我们考虑 float 改变所有的定位。花车的布置方式很“特别”。它们在流动中，但会尽可能向上并在 float 方向上。如果它们太宽而无法与该行的其他 float 内容相邻，则它们会转到下一行。

你可以做

<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' 意味着一个元素将出现在前面 float 的元素之下。 #b 将在下一行，#a 下面。你也可以让 #a 在右边有一个很大的边距，或者足够宽以填充任何容器而不为 #b 留出空间，让 #b 在 #a 下面而不是在它旁边。