CSS定位相对于固定/绝对

道歉，如果我看起来相当“不炫”与CSS。我一直在试图设置以下...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将出现ontop的#a的，除非我声明为静态的位置或绝对的，但将需要手动定位顶部/左侧属性，并且这对于所有浏览器都不能正确显示。任何帮助将不胜感激！

现在修好了！（不得不声明的HTML，身体:(宽度：95％;））感谢所有的建议家伙！

来源

2011-06-11 user784446

可能您已经了解了定位。为更多检查这些链接http://css-tricks.com/absolute-positioning-inside-relative-positioning/，http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-不同/，http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/ – sandeep 2011-06-11 05:16:46

首先，一对夫妇修复：＃0需要命名为别的，因为ID不能以数字开头。您还缺少：在#a的浮动属性中。不知道'x'和'y'的高度/宽度有什么关系 - 我认为这些只是个例子？

固定和绝对元素超出了文档流程。也就是说，它们不占据普通定位元素的空间。

因此，在您的示例中，固定元素将具有相对的一个，因为它们可以居住在相同的x-y空间中。如果你认为它是绝对的，top：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下方而不是旁边。

来源

2011-06-11 05:11:53 Cole

ID可以绝对以HTML5中的数字开头。 – 2011-06-11 05:19:18

@Matt Ball好吧...猜我们最好告诉他宣布一个文档类型？ – Cole 2011-06-11 05:39:08

对不一致的道歉，但这不符合我的意图 - 我试图用#a创建一个空盒子，在#a旁边附加了#zero，在#a旁边显示了#b，就好像它是连接到框。 – user784446 2011-06-12 10:54:28

我不相信你的width: x和height: y语法是正确的，并且你的#a float属性缺少冒号。此外，身份证不能以数字开头，因此#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>

来源

2011-06-11 05:10:31 Vap0r

感谢您的回复，但使用的语法只是为了强调一个例子。无论如何，这不符合我的意图 - 我试图用#a创建一个空盒子，在#zero之外附加#b显示在#a旁边。 – user784446 2011-06-12 10:53:27

CSS定位相对于固定/绝对

回答

相关问题