Heading div images should be displayed at a lower depth_问答_开发者

Heading div images should be displayed at a lower depth

开发者 https://www.devze.com 2023-03-15 16:17 出处：网络

I have a webpage where the top 25% of the page is the heading(with images in it) & the rest of the page has the content.

相关专题：css javascript

I have a webpage where the top 25% of the page is the heading(with images in it) & the rest of the page has the content.

I am trying to get the heading div to display is pictures at a lower depth as the content div because currently the heading images overflow into the content div(intentionally) & when they do they mess up the positioning of the HTML elements in the content div.

My code below should make the heading div display below the content div but it doesn't. Can you help me figure out why & how to fix it?

My CSS:

html, body { height: 100%; width: 100%; }
    body       { background-color: RGB(255, 255, 255); margin: 20px; text-align: center; }

    #outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
    #header         { width: 1200px; height: 25%;  background-color: blue; margin-left: auto; margin-right: auto; overflow: visible; z-index: -5; }
    #main           { display: block; width: 1200px; height: 60%; background-color: blue; margin-left: auto; margin-right: auto; z-index: 5; }
    #navBar         { float: left; height: 800px; width: 240px; background-color: red; } 
    #content        { float: left; height: 800px; width: 760px; background-color: yellow; }

    #kamaleiText    { float: left; }
    #kamaleiLogo    { float: left; padding-top: 30px; background-color: green; z-index: inherit; }
    #kamaleiLeaves  { float: right开发者_如何学编程; z-index: -2; background-color: cyan; z-index: inherit; }

And my HTML is the following:

<body>

    <div id="outerContainer">

        <!-- Knowtice if I set the images width to something smaller then everything is spaced out correctly, so these elements are not being shown below others when they should be -->

        <div id="header">
            <img id="kamaleiLogo" src="" alt="Pic1" height="98%" width="300px"/>      
            <img id="kamaleiLeaves" src="" alt="Pic2" height="300px" width="300px"/>
        </div>
        <br/>
        <div id="main">
            <div id="navBar">
            </div>

            <div id="content">
                abcdef
            </div>
        </div>
    </div>

</body>

can you check out this jsfiddle

basically, i have made the #outerContainer and #header positioned relatively and increased the z-index for the header so it appears on top

then absolutely positioned pic1 and pic2 in the header so they overflow onto the main content

#outerContainer { position: relative; background-color: #DCFF9A; height: 100%; width: 100%; }
#header         { position: relative; width: 1200px; height: 25%;  background-color: blue; margin-left: auto; margin-right: auto; overflow: visible; z-index: 100; }
#kamaleiLogo    { position: absolute; top:0; left:0; padding-top: 30px; background-color: green; z-index: inherit; }
#kamaleiLeaves  { position: absolute; top:0; right:0; background-color: cyan; z-index: inherit; }

@mack; in your #main div there are two floated elements so first clear it may be that's work for you

#main           { overflow:hidden;width: 1200px; height: 60%; background-color: blue; margin-left: auto; margin-right: auto; z-index: 5; }

Heading div images should be displayed at a lower depth

精彩评论

关注公众号

热门标签

图文推荐

Heading div images should be displayed at a lower depth

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：