Home/ Questions/Q 7927681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T19:26:52+00:00

I have a problem and I can’t figure how to correct this. What I

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0