Question

道歉，如果我对CSS表现得相当“noobish”。我一直试图设置以下内容......

#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 :(宽度：95％;））感谢所有的建议人员！

Answer 1

首先，有几个修复：＃0需要被命名为其他东西，因为ID不能以数字开头。你也错过了：在#a的float属性中。不确定高度/宽度的'x'和'y'是什么 - 我认为这只是例子？

固定和绝对元素不在文档流程中。也就是说，它们不占用正常定位元素的空间。

因此，在您的示例中，固定元素将具有相对的元素，因为它们可以居住在相同的x-y空间中。如果你把它作为绝对的，顶部：0;左：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>

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

Answer 2

我不相信您的width: x和height: y语法是正确的，并且您的#a浮动属性缺少冒号。此外，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>

CSS定位相对于固定/绝对

2 个答案: