0

I want to place a div over another. I asked this the other day and someone explained how z-index works (he or she said: "Element with a larger z-index number will cover an element with a smaller one")

I have now added another two divs and cant get the fourth one (the footer of my "document"/website) to be on top of the others

Here is the other's day question/thread: How to place a div over another

Someone asked what I wanted to do. I am just starting and following a basic course. The last "asignment" is to create a resume.

Here is theirs (example):

https://i.stack.imgur.com/xLgMM.png

However, I wanted to change it a bit.

I don't want any margins on the page (e.g. left of their blue left bar), I don't want rounded corners, and I don't want spaces between the divs. That is, I want all my "site" covered by color:

A beige-pinkish (#F5F0EC) on the background, a pink header, a grey footer and then a lighter grey as a margin on the left, on top of all of them.

This is what I have so far in my css: 

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

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

.right {
    width: 106%;
    background-color: #F5F0EC;
    height: 695px;
    margin-left: -8px;
    margin-top: -8px;
    position: relative;
    margin-top: -645px;
    z-index: 1;
}

#footer {
    width: 106%;
    background-color: #404145;
    height: 50px;
    margin-left: -8px;
    position: relative;
    z-index: 4;
}

Looks like my footer div is below the background (the "right" one with the color #F5F0EC), and I want it to be on top of it. And then, the left grey bar I want it on top of both of them (or all of them)

Tried ordering the elements with z-index: 1, z-index: 2, etc. but doesn't seem to work.

Community
  • 1
  • 1
Starting Out
  • 123
  • 1
  • 2
  • 6
  • it would make things a lot easier if you could put this in a jsfiddle or plunkr. as for the no margins, radius', and space between divs you could do something like this: *{ margin: 0; padding: 0; border-radius:0; } – adrian_reimer Sep 16 '15 at 19:58

1 Answers1

0

As the person in the answer you linked before (https://stackoverflow.com/a/32485707/5260563) stated, you need to use 

position: absolute;

when you make an element have a z-index.

Community
  • 1
  • 1
Jesse
  • 1,262
  • 1
  • 9
  • 19
  • Oh right, I didnt get that. However, I just changed them and by doing that my background (right div) and my footer (footer div) completely dissapear. See on the window on the upper right side of the screen: http://i.stack.imgur.com/ubNRl.png – Starting Out Sep 16 '15 at 19:57