Question

我只是CSS的新手：

我的问题是我的Logo出现但它在后面，我应该把我的div：最顶层的包装器？因为如果我把我的div：最顶层，它将与徽标一起显示，但我希望我的石灰颜色放在浏览器的最大宽度上..

这是我的HTML代码

<body>
<div id="top-most">
</div>

<div id="wrapper">
<img alt="logo" src="images/logo.png" /><div id="wrapper">      
</div>


<div id="header">
    <p>Put something here</p>
</div>
</body>

这是我的CSS代码：

#top-most           { background-color: lime; height:51px ;width:100%; position:absolute; }

#wrapper            {  width :960px; height:100px ; overflow:hidden; margin:0px auto; }

#logo               { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }

#header             { margin: 30px  0 0 20px; float:right; width: 750px;   }
#header p           { color: #979899; }

以下是输出： http://imgur.com/gWDNYGB

Answer 1

你好:)你需要把#wrapper放在＃top-most。

<body>
<div id="top-most">
<div id="wrapper">
<img alt="logo" src="http://placekitten.com/200/300" />   
</div>
</div>
<div id="header">
<p>Put something here</p>
</div>
</body>

我也编辑了你的Css代码。

#top-most           { background-color: lime; padding: 5px; position:absolute; }
#wrapper            {  width :960px; height:100px ; overflow:hidden; margin:0px auto; }
#logo               { margin: 19px 0 0 10px; position:absolute; top: 0px; z-index:2; }
#header             { margin: 30px  0 0 20px; float:right; width: 750px;   }
#header p           { color: #979899; }

你不需要填充：5px;在＃top-most中它看起来会更好 Demo

CSS Wrapper，徽标显示在后面

1 个答案: