CSS Fixed and Absolute

Question

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!

Jithin Raj P R · Accepted Answer

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.].

lordvcs · Answer

I believe adding a simple z-index: 1 to the header is the way to go.

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;
z-index: 1;
}

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

Mr. Roshan · Answer

Use z-index: 1; into your Fixed header will solved the problem.

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: yellow;
z-index: 1;
}

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

Mari Magesh · Answer

Use z-index

h2{
   z-index:2;
  }

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;
border-bottom:solid 1px #ccc;
top:0px;
z-index:2;
 
}

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

CSS Fixed and Absolute

Tags:

html

css

CAJ69I

4 Answers

Jithin Raj P R

lordvcs

Mr. Roshan

Mari Magesh

Recent Activity

Donate For Us

CSS Fixed and Absolute

Tags:

html

css

CAJ69I

4 Answers

Jithin Raj P R

lordvcs

Mr. Roshan

Mari Magesh

Related questions

Recent Activity

Donate For Us