CODEWITHSUNDEEP
css
Christopher
Christopher

Reputation: 127

How to overlay elements

After trying every possible variation of position: relative/absolute/etc and negative margins, I'm wondering if someone can tell me how to get the two green bars to overlay the header image - at top and bottom - at http://itlaunchpad.patienceandfortitude.com/iphone-cant-get-your-email/.

*Note that the main header has to remain an img and not become a background property due to the way WordPress' custom image header handles responsiveness.

Many thanks!

Upvotes: 1

Views: 160

Answers (3)

Ishan Jain
Ishan Jain

Reputation: 8171

you can use CSS z-index Property

for Example- http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

 DEMO - http://jsfiddle.net/xY5Re/75/

Upvotes: 0

w3uiguru
w3uiguru

Reputation: 5895

Try this css

 and make the inline css to external css its for your reference (inline css).

bootstrap.css line 5416

#masthead.container {
    padding: 0;
    position: relative;
    width: 1198px;
}


app.css line 13

#banner {
    position: absolute;
}

bootstrap.css line  3779

.navbar {
    color: #777777;
    overflow: visible;
    position: absolute;
    width: 100%;
}


<div class="container" style="width:100%">
<header style="margin-top: -40px;" class="navbar" role="banner">

see image:

enter image description here

Upvotes: 1

Sampson
Sampson

Reputation: 268344

Absolutely position the two bars within the common ancestor element. For example:

​<header>
    <nav><a href="#">Foobar</a></nav>
    <img src="http://placekitten.com/640/200" />
    <nav><a href="#">Foobar2</a></nav>
</header>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And with the following CSS:

​header { 
    position: relative
}
nav:nth-of-type(1) { 
    top: 0
}
nav:nth-of-type(2) { 
    bottom: 0
}
nav {
    background-color: rgba(0,255,0,.25);
    box-sizing: border-box;
    position: absolute;
    width: 100%;
}

Which gives you the following: http://jsfiddle.net/M3jyV/

Upvotes: 5

Related Questions