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上。 但我失踪了..
其实我想要那样的结果。
请告诉我。
<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; }Well please first of all check if i did any mistake let me know. and also i having trouble that my #pattern overlaying all my classes. i just want this class appear over #header. but something i am missing..
Actually i want results like that.
Please let me know.
最满意答案
这个标记可以提高很多。 但是,如果您只是在寻找修补程序,请尝试添加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。 它们可能非常强大,并且在大型网站上可能会导致很多痛苦,试图在需要时覆盖它们及其子元素。
This markup could be improved a lot. But if you are just looking for a fix try adding position: relative to #main.
What's happening is #pattern is coming out of the natural flow of the document because it has position: absolute set on it. Therefore unless stated otherwise it appears on top of every other element inside it's parent element.
Also I would consider reducing your markup to something like this...
<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>Be careful not to use too many IDs when using them to style elements. They can be very powerful and on a large site can result in lots of pain trying to override them and their child elements when you want to.
更多推荐
发布评论