CSS Fixed and Absolute

  • A+
Category:Languages

My page has a fixed header, and there are content below. I have a div element, inside which I would like to relatively position another div. So I'm using the following structure:

  • Header: Fixed position
  • Container div: relative position
  • Div inside div: absolute position

This is all looking good, however in practice the relative and the absolute divs are displayed in front of the header, when scrolling.

div.relative {     position: relative;     width: 400px;     height: 1000px;     border: 3px solid #73AD21; }   div.absolute {     position: absolute;     top: 80px;     right: 0;     width: 200px;     height: 100px;     border: 3px solid #73AD21; } h2{ position: fixed; background-color: white; }
<!DOCTYPE html> <html> <head>  </head> <body>  <h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  <div class="relative">This div element has position: relative;   <div class="absolute">This div element has position: absolute;</div> </div>  </body> </html>

I know about z-index, however before using another CSS element, I would like to know if it's possible to solve this problem without adding a new variable to the already existing code. Thank you in advance!

 


This will work for you:

div.relative {   position: relative;   width: 400px;   height: 1000px;   border: 3px solid #73AD21;   z-index: 0; }  div.absolute {   position: absolute;   top: 80px;   right: 0;   width: 200px;   height: 100px;   border: 3px solid #73AD21; }  h2 {   position: fixed;   background-color: white;   z-index: 9; }
<!DOCTYPE html> <html>  <head>  </head>  <body>    <h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem     ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum     dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>    <div class="relative">This div element has position: relative;     <div class="absolute">This div element has position: absolute;</div>   </div>  </body>  </html>

I have just added z-index: 0; to div.relative and z-index: 9; to h2[the z-index to the h2 can be changed as per your requirement, it works as layer format, so if you want your h2 to be top of all elements you can even go with z-index: 9999;, but all this depends upon the other elements in the page.].

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: