31

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>
3
  • 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 ;) May 8, 2012 at 21:58
  • 1
    Worked! Perfect. I've tried that before but I din't change it to "absolute". Thank you very much!
    – rmz
    May 8, 2012 at 22:06
  • extra end tag of div in your html
    – adedoy
    May 8, 2012 at 22:11

4 Answers 4

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.

7
  • Yes, you are absolutly right. Thanks for the advice. Im still messing a lot with positioning...thanks again!
    – rmz
    May 8, 2012 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! May 8, 2012 at 22:23
  • 15
    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, 2018 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. May 31, 2018 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, 2021 at 5:40
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

0
3

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/

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!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.