CODEWITHSUNDEEP
htmlcssz-index
user782104
user782104

Reputation: 13555

How to ordering the z-index in this case

There is an element that has 3 layer . For example:

book layer , adv layer and black layer

The div structure of them are

<div id="black"></div>
<div id="book">
    <div id="adv"></div>
</div>

(black is absolute, book is relative, adv is absolute)

The problem is , if I would like the black layer is above book but under adv , how can I achieve this without changing the structure?

Upvotes: 0

Views: 99

Answers (2)

Adam D Harrington
Adam D Harrington

Reputation: 353

Got it:

See it on JSFiddle!

HTML

<div id="black"></div>
<div id="book">
    <div id="adv"></div>
</div>

CSS

#black{
    width: 60%;
    height: 60%;
    background: black;
    position: absolute;
    top: 20%;
    left:20%
    z-index:1;
}
#book {
    width: 100%;
    height: 400px;
    background: pink;
    z-index:-1;
}

#adv{
    width: 20%;
    height: 20%;
    background: red;
    position: absolute;
    top: 40%;
    left:40%;
    z-index:2;
}

The Z-index highlights

#book{ 
z-index: -1;
}
#black{ 
z-index: 1;
}
#adv{ 
z-index: 2;
}

Your main problem will be aligning the elements unless you wrap them all in a div with position:relative

Upvotes: 1

Manwal
Manwal

Reputation: 23816

I have test it,i think this css help you to create that structure of layer as you want.

Background color is used for differentiate layers.

#black{width: 100px;
height: 100px;
background: red;
position: absolute;
top: 187px;}
#book
{
width: 585px;
height: 230px;
background: pink;
padding: 92px;
}

#adv{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 187px;
}

Upvotes: 0

Related Questions