绝对定位的元素出现在我的其他元素

顶部

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="pattern"></div> 
    <div id="main"> 
     <img src="http://i52.tinypic.com/16i6z9d.jpg" /> 
     <h3 class="text"> 
      Freelance Web/Logo <br /> 
      Designer & Developer <br /> 
      → Muzammil Hussain 
     </h3> 
    </div> 
</div>

CSS：绝对定位的元素出现在我的其他元素

body { font-size:12px/20px; } 
#wrapper { position:relative; } 
#header { width:100%; height:150px; background:url(http://i55.tinypic.com/1zpgny8.jpg) repeat-x;} 
#pattern { width:100%; height:150px; background:url(http://i51.tinypic.com/ao75eg.jpg) repeat; position:absolute; top:0px; } 
#main { width:1200px; margin:0 auto; margin-top:-103px; } 
#main img { float:left; margin-right:10px; } 
#main h3 { float:left; margin-top:5px; font:12px/20px "Bookman Old Style"; text-shadow: 1px 1px #000; line-height:14px; color:#fff; }

那么请首先检查，如果我没有任何错误，让我知道。还有我的＃模式覆盖了我所有的课程。我只是希望这个类出现在#header上。但我失去了一些东西。

其实我想要那样的结果。

final result should appear after HTML AND CSS

请让我知道。

来源

2011-05-13 Muzammil

更容易帮助，如果你有一个在线的例子，我们来看看 – Znarkus 2011-05-13 08:45:37

http://jsfiddle.net/FwgfT/似乎对我来说......什么是错的？ – sled 2011-05-13 08:48:22

问题在于'＃pattern'类，我不想将它设置在所有图像上（即徽标和作者的详细信息）。我只想在上面的背景图片或'＃header'上面放置tha模式。请检查我想要的最终结果的图像。 – Muzammil 2011-05-13 10:10:06

这个标记可以提高很多。但是，如果您只是在寻找修补程序，请尝试将position: relative添加到#main。

发生了什么是#pattern正在从文档的自然流出，因为它已设置position: absolute。因此，除非另有说明，否则它会出现在其父元素中的每个其他元素的顶部。

此外，我会考虑减少您的标记是这样的......

<div id="wrapper"> 
    <div id="pattern"></div> 
    <img src="http://i52.tinypic.com/16i6z9d.jpg" /> 
    <h3 class="text"> 
     Freelance Web/Logo <br /> 
     Designer & Developer <br /> 
     → Muzammil Hussain 
    </h3> 
</div>

要小心，不要使用他们的风格元素时使用了太多的ID。它们可能非常强大，并且在大型网站上可能会导致很多痛苦，试图在需要时覆盖它们及其子元素。

来源

2011-05-13 11:03:46 Mindthetic

绝对定位的元素出现在我的其他元素

回答

相关问题