How to "z-index" to make a menu always on top of the content

Question

I have a problem and I can't figure how to correct this. What I want is that the "Red box" stay on top of the page in a z-index 2, while the all the content on the background stay on index 1 but somehow this code is "collapsing" the layers. If someone can help me I really appreciate it.

<html>
<head>
<title></title>
<style type="text/css">

body { margin: 0; }

#container {
    position: absolute;
    float: right;
    z-index: 1;

}

.left1 { 
    background-color: blue;
    height: 50px;
    width: 100%;

}
.left2 { 
    background-color: green;
    height: 50px;
    width: 100%;
    
}


#right { 
    background-color: red;
    height: 300px;
    width: 300px;
    float:right;
    z-index: 999999;
    margin-top: 0px;
    position: relative;
}


        
        
</style>
</head>

<body>

<div id="container"></div>
<div class="left1">LEFT BLUE</div>
<div class="left2">LEFT GREEN</div>
</div>
<div id="right">RIGHT RED</div>

</body>
</html>

I think you'll need to share some html to help us help you... you probably don't need z-index to do that. you can use relative and absolute positioning... and looking to your css example, I'm afraid that maybe you don't quite understand how to properly use relative and absolute positioning. Not that I know much about that ;) — rafaelbiten, May 08 '12 at 21:58
Worked! Perfect. I've tried that before but I din't change it to "absolute". Thank you very much! — rmz, May 08 '12 at 22:06

rafaelbiten · Accepted Answer · 2021-02-17T14:30:18.060

21

You most probably don't need z-index to do that. You can use relative and absolute positioning.

I advise you to take a better look at css positioning and the difference between relative and absolute positioning... I saw you're setting position: absolute; to an element and trying to float that element. It won't work friend! When you understand positioning in CSS it will make your work a lot easier! ;)

Edit: Just to be clear, positioning is not a replacement for them and I do use z-index. I just try to avoid using them. Using z-indexes everywhere seems easy and fun at first... until you have bugs related to them and find yourself having to revisit and manage z-indexes.

edited Feb 17 '21 at 14:30

answered May 08 '12 at 22:10

rafaelbiten

6,074
2
31
36

Yes, you are absolutly right. Thanks for the advice. Im still messing a lot with positioning...thanks again! – rmz May 08 '12 at 22:19
6

Let me know if you need any help! Just remember that "absolute" positioned elements will be always "relative" to it's parent element that was set to 'position: relative;'. If you understand that, it will help you with absolute positioned elements. Good luck with your project! – rafaelbiten May 08 '12 at 22:23
14

Sorry, but downvoting. What kind of answer is this? It is too broad. Positioning is no replacement for z-index. There are a few situations where it might not be needed, but if some elements need to be covered by others, then z-index is definitely one of the ways to go. It's not rare to combine position: absolute with a higher z-index value. – Jan Kalfus May 31 '18 at 11:10
That's fine, don't need to be sorry for down voting. I, personally, tend to avoid using z-indexes unless I find it really necessary. And you're right that positioning is no replacement for them. – rafaelbiten May 31 '18 at 12:01
downvoting as this answer creates problems for more complex applications and component structure. Many times the structure of the document changes overtime and relying on the document structure to keep the order in which menus float is not a good practice in my opinion. If you are using less or scss or css 3, you can take advantage of their variables and define global constants for menus z-indexes. It makes it more clear for additional developers working on the same project. – Noy Oliel Feb 17 '21 at 05:40
Thanks @olNoy. I just edited my answer with a note. It's been a few years that I wrote that answer and, on this case, I still stand to my opinion and advise that it's good to avoid using `z-index` when possible. – rafaelbiten Feb 17 '21 at 14:36
The posotion and z-index properties might be set and work as it is supposed to. Another thing to keep in mind is the overflow property of the parent. Which might, depending on the setting "cut" part of the element of, etc. – Danie Schoeman Jun 22 '23 at 08:54

score 15 · Answer 2 · answered May 21 '15 at 07:43

15

you could put the style in container div menu with:

<div style="position:relative; z-index:10">
   ...
   <!--html menu-->
   ...
</div>

before enter image description here

after

enter image description here

answered May 21 '15 at 07:43

Tarek Kalaji

2,149
27
30

score 3 · Answer 3 · answered May 08 '12 at 22:19

Ok, Im assuming you want to put the .left inside the container so I suggest you edit your html. The key is the position:absolute and right:0

#right { 
    background-color: red;
    height: 300px;
    width: 300px;
    z-index: 999999;
    margin-top: 0px;
    position: absolute;
    right:0;
}

here is the full code: http://jsfiddle.net/T9FJL/

score 2 · Answer 4 · answered May 08 '12 at 22:07

2

#right { 
  background-color: red;
  height: 300px;
  width: 300px;
  z-index: 9999;
  margin-top: 0px;
  position: absolute;
  top:0;
  right:0;
}

position: absolute; top:0; right:0; do the work here! :) Also remove the floating!

answered May 08 '12 at 22:07

creativeby

859
6
10

How to "z-index" to make a menu always on top of the content

4 Answers4