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  Sorry for my English  Thanks in advance    lt html gt   lt head gt   lt title gt  lt  title gt   lt style type  text css  gt   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         lt  style gt   lt  head gt    lt body gt    lt div id  container  gt  lt  div gt   lt div class  left1  gt LEFT BLUE lt  div gt   lt div class  left2  gt LEFT GREEN lt  div gt   lt  div gt   lt div id  right  gt RIGHT RED lt  div gt    lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

you could put the style in container div menu with    lt div style  position relative  z-index 10  gt             lt  --html menu-- gt          lt  div gt    before   after

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

Examples related to css

Examples related to z-index