CSS定位相对于固定/绝对 [英] CSS positioning relative over fixed/absolute
问题描述
＃0 {
width：100％;
height：y;
border：1px纯黑色;
}
#a {
position：fixed;
向左浮动;
width：x;
height：y;
border：1px纯黑色;
}
#b {
position：relative;
float：left;
width：x;
height：y;
border-right：1px纯黑色;
}
/ * HTML * /
< div id =0>一些div ...< / div>
< div id =a>另一个div< / div>
< div id =b> Final div ...< / div>
出于某种原因，如果我试图将#b放在#a下面，#b会出现在#a除非我声明其位置为静态或绝对位置，但需要手动定位顶部/左侧属性，并且这对于所有浏览器都无法正确显示。任何帮助将不胜感激！
现在已经修好了！ （不得不声明HTML，body :(宽度：95％;））感谢所有的建议家伙！
所有，修复了几个问题：＃0需要命名别的东西，因为ID不能以数字开头。您还缺少：在#a的浮动属性中。不知道'x'和'y'的高度/宽度是多少 - 我假设这些只是例子？
固定和绝对元素不在文件流程。也就是说，它们不会像普通定位元素那样占用空间。
因此，在您的示例中，固定元素将具有相对的一个，因为您发现是因为他们可以居住在同一个xy空间。如果你认为它是绝对的，top：0;左：0，同样的事情会发生。
接下来，你有一个作为一个浮动（几乎），所以让我们考虑浮动改变所有的定位。漂浮物在布置方式上是特殊的。它们处于流动状态，但会尽可能地朝着浮动方向。如果它们太宽泛以至于不能适应那条线上的其他浮动内容，那么它们会到达下一行。
您可以这样做
< style>
#a
{
float：left;
height：100px;
width：150px;
背景颜色：黑色;
}
#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之下而不是旁边。
Apologies if I appear quite "noobish" with CSS. I've been trying to set the following...
#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>
For some reason, if I attempt to position #b below #a, #b will appear ontop of #a unless I declare its position as either static or absolute, but will then be required to manually position the top/left properties, and this doesn't display properly for all browsers either. Any help would be greatly appreciated!
Have got it fixed now! (had to declare html, body:( width: 95%;)) Thanks for all the advice guys!
First of all, a couple of fixes: #0 needs to be named something else, because IDs cannot start with a number. You're also missing a : in the float property for #a. Not sure what's with the 'x' and 'y' for the height/width, either - I assume those are just examples?
Fixed and Absolute elements are out of the document flow. That is, they don't take up space as far as normal positioned elements.
Therefore, the fixed element will have the relative one over it in your example, as you found because they can inhabit the same x-y space. If you had it as absolute, top:0; left: 0, the same thing would happen.
Next, you had one as a float (almost), so let's consider that float changes all of that positioning. Floats are 'special' in the way they are laid out. They are in the flow, but will be as far up and in the float direction as possible. If they're too wide to fit next to other floated content on that line, they go to the next line.
You could do
<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' means an element will appear beneath preceding elements that are floated. #b will be on the next line, underneath #a. You could also make #a have a big margin on the right, or be wide enough to fill whatever container and not leave room for #b, to make #b be beneath #a instead of next to it.
这篇关于CSS定位相对于固定/绝对的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
