CODEWITHSUNDEEP
htmlcss
RegulusBlack
RegulusBlack

Reputation: 53

Place an absolute-positioned element behind an relative-positioned element

Is it possible to place the absolute-positioned #element behind the relative-positioned #container ID, if the former is a child of the latter ?

In other words, how can I get the red element to be positioned between the blue element and the yellow element??

z-index doesn't seem to work.

Example

HTML:

<div id="big_container">
    <div id="container">
        <div id="element"></div>
    </div>
</div>

CSS:

#big_container {
    width:100%;
    height:100%;
    background:yellow;
}
#container, #element {
    height:50px;
    width:50px;
}

#container {
    position:relative;
    z-index:5;
    background:blue;
}

#element {
    position:absolute;
    z-index:10;
    background:red;
    top:5px;
    left:5px;
}

Updated.

Upvotes: 2

Views: 4172

Answers (3)

Himesh Aadeshara
Himesh Aadeshara

Reputation: 2121

just apply z-index : -1 to the red block and remove the position property of blue block it will work

#container, #element ,#element1 ,#element2 {
    height:50px;
    width:50px;
}
#container {
      z-index: 5;
    background: #00F;
}
#element {
       position: absolute;
    z-index: -8;
    background: #F00;
    top: 21px;
    left: 5px;
}
#element1 {
    position: absolute;
    z-index: -9;
    background: #008000;
    top: 10px;
    left: 25px;
}
#element2 {
     position: absolute;
    z-index: -10;
    background: #FF0;
    top: 27px;
    left: 33px;
}
<div id="container">
    <div id="element"></div>
     <div id="element1"></div>
     <div id="element2"></div>
</div>

here you can check out you can manage those divs with minus z-indexing here is the demo example

DEMO

Upvotes: 1

BENARD Patrick
BENARD Patrick

Reputation: 30975

You can use pseudo element in css, if it's just about drawing... :

Fiddle : http://jsfiddle.net/4oyau3wy/1/

Css:

#container, #element {
    height:50px;
    width:50px;
}
#container:before {
    content:"";
    width: 50px;
    height:50px;
    top:0;
    left:0;
    z-index:5;
    background:blue;
    position:absolute;
}
#element:before {
    content:"";
    width: 50px;
        height:50px;
    position:absolute;
    z-index:4;
    background:red;
    top:5px;
    left:5px;
}

Upvotes: 0

Turnip
Turnip

Reputation: 36652

Remove thew z-index from the parent and set the child to -1

#container, #element {
    height:50px;
    width:50px;
}
#container {
    position:relative;
    background:blue;
}
#element {
    position:absolute;
    z-index:-1;
    background:red;
    top:5px;
    left:5px;
}
<div id="container">
    <div id="element"></div>
</div>

Upvotes: 4

Related Questions