5

I am trying to put a div on top of another.

To see what I want to achieve, check this image: https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg

I want my grey left div on top of the pink header.

Here is my HTML so far: 

<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>

And my CSS: 

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    margin-left: -8px;
}

This is putting my pink header on top of the grey left one, and I want it to be other way around, just like in the photo I showed you: https://img1.etsystatic.com/059/1/8585976/il_570xN.749758093_cccu.jpg

meetar
  • 7,443
  • 8
  • 42
  • 73
Starting Out
  • 123
  • 1
  • 2
  • 6
  • `z-index: 2` on `#left` doesn't do it? – Andy Sep 09 '15 at 16:56
  • 1
    check out `z-index` and absolute positioning. https://css-tricks.com/almanac/properties/z/z-index/ – timgavin Sep 09 '15 at 16:56
  • 1
    Is it not already above it? They are not overlapping in the first place, so when you use `position: relative; top:-10px` on `#left` you will see it does overlap the pink. – jaunt Sep 09 '15 at 17:01
  • 1
    Any reason you cannot use a background image on `` or `` for the pink? Then your DIVs will overlay it by default? Are you attempting to replicate the resume for the web? You really should clarify what you are trying to achieve because it is not clear at all. – hungerstar Sep 09 '15 at 17:04
  • Any reason you cannot do something [like this](http://jsfiddle.net/8crv7x0h/)? No absolute positioning or z-indexing. Sort of looks like what you're after. – hungerstar Sep 09 '15 at 17:20

5 Answers5

5

You need to use z-index and position:absolute CSS properties. Additionally you need to also position your second DIV (which is on top of the other) by giving some values to top and left CSS attributes. Following is an example:

#first{
    position: absolute;
    z-index:1;
}
#second{
    position: absolute;
    z-index:2;
    top: 50px;
    left: 50px;
}

See this JSfiddle demo

leo.fcx
  • 6,137
  • 2
  • 21
  • 37
1

Z-index makes changes on the third axis. Element with a larger z-index number will cover an element with a smaller one.

For trivia sake, default z-index of any element is auto, which means it inherits a value from its parent element. An html element has a z-index of 0.

Edit: Check out this JSFiddle. The #left div is above the #right one. Remove z-index property from CSS styling of a left div, and you will see that it isn't going to be above the other div no more.

Mirza
  • 213
  • 2
  • 8
0

I don't quite get your expected result, but here's a POC

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
    z-index: 1;
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    margin-left: -8px;
    position: absolute;
    z-index: 2;
}
<body>
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
<div id="footer"></div>
</body>
Aung Myo Linn
  • 2,820
  • 3
  • 27
  • 38
0

try this example here, it was working fine you expectedhttp://jsfiddle.net/maheswaran/fcw043zL/

Maheswaran S
  • 525
  • 3
  • 12
0

Thanks to all,between leo.fcx's and Mirza's explanation ("Z-index makes changes on the third axis. Element with a larger z-index number will cover an element with a smaller one") I did it

I didn't know what z-index was yet.

Finally I have: 

#header {
    width: 106%; 
    background-color: #E8D5C6;
    height: 100px;
    margin-top: -8px;
    margin-left: -8px;
    position: absolute;
}

#left {
    width: 15px; 
    background-color: #919191;
    height: 400px;
    margin-left: -8px;
    margin-top: -8px;
    position: relative;
    z-index: 2;
}

Which works perfectly for what I wanted.

Starting Out
  • 123
  • 1
  • 2
  • 6