css z-index issue

[ui0x1ux]

I’m using to relative css classes.So i want to one div over other.This is my code.

.header-wrapper img{
    position: relative;
    z-index: 1;
    margin: 0;
}

.header-wrapper .title a{
    text-decoration: none;
    color: red;
    position: relative;
     z-index: 2;
     margin: 0;
}

but it’s not working properly.When i set first element position to absolute it’s working.Otherwise not.

[Paulie_D]

That’s the way positioning works

relative means relative to itself…if don’t add any position values the element won’t move.

It’s not entirely clear what you are trying to achieve but I suspect that position:absolute for the anchor link would the right method if you are trying to place the link over the image.

Perhaps you could make a Codepen.io demo?

[ui0x1ux]

Hi Paulie, thanks for the quick reply.I tried your way.But still it’s not working.I’ll add the code to Codepen and put the link here.

[Soronbe]

z-index will never change the position of elements. The only thing it does is deciding which element comes on top when (and if) they overlap.

[ui0x1ux]

Here is my live code on CodePen.Please check it.

Link – http://codepen.io/anon/pen/nvase

[Senff]

The header-wrapper should be set to position:relative.
Then the contents (img and title) should be set to position:absolute. They will be positioned relative to it’s parent (header-wrapper).

http://codepen.io/senff/pen/arzcb?editors=110

[ui0x1ux]

@Senff:Thank you very much.But i’m bit confusing why header-wrapper’s position is relative and other elements’ position absolute?Can you please explain it more?

[nigelc]

Why place the img in the HTML content why not just set it as the background to the containing div ?

.header-wrapper{
width: 80%;
height: 600px;
border: solid #000000 1px;
float: left;
margin-left: 10%;
background: url(http://www.daviddarling.info/images/mountain.jpg) no-repeat top center;
background-size:cover;
}
<code></code>

[Author]

Posts