What is the difference between sticky & absolute in HTML-CSS position property?

HimanshuRaj
May 28, 2023
233 views
0 votes
2 Answers

* {
  margin: 0;
  padding: 0;
}

p {
  text-align: justify;
}

.container {
  margin: 15px auto;
  border: 2px solid #FF0000;
  background-color: #69D818;
  width: 80%;
  height: 6000px;
}

h1 {
  background-color: #0013FF;
}

#first {
  position: sticky;
  top: 10px;
}

#second {
  position: fixed;
  top: 200px;
}

#third {
  position: absolute;
  width: 100%;
  top: 250px;
}

#fourth {
  position: relative;
  top: 50px;
}

<div class="container">
  <h1 id="first">Position Sticky</h1>
  <h1 id="second">Position Fixed</h1>
  <h1 id="third">Position Absolute</h1>
  <h1 id="fourth">Position Relative</h1>
</div>

In the above code css position is not working. When I scroll down heading is not sticked to top position. But when I reach scroll upward sticky property is working. Another problem is that position: absolute heading is of width:100% and it goes out of the div container but I think it should be in the div container. Help

Answers

position: sticky works, it’s just that the element overlaps, because you need to specify a higher z-index.

An element with an position: absolute; will occupy 100% of the width of the .container if it is given a position: relative;:

<!DOCTYPE html>
    <html>

    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>CSS position</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }

        p {
          text-align: justify;
        }

        .container {
          margin: 15px auto;
          border: 2px solid #FF0000;
          background-color: #69D818;
          width: 80%;
          height: 6000px;
          position: relative;
        }

        h1 {
          background-color: #0013FF;
        }

        #first {
          position: sticky;
          top: 10px;
          z-index: 666; /* 👈 */
        }

        #second {
          position: fixed;
          top: 200px;
        }

        #third {
          position: absolute;
          width: 100%;
          top: 250px;
        }

        #fourth {
          position: relative;
          top: 50px;
        }
      </style>
    </head>

    <body>
      <div class="container">
        <h1 id="first">Position Sticky</h1>
        <h1 id="second">Position Fixed</h1>
        <h1 id="third">Position Absolute</h1>
        <h1 id="fourth">Position Relative</h1>
      </div>
    </body>

    </html>

It does work, you just can’t see it because it overlaps.

A higher z-index number makes it go higher up in the Z dimension (closer to you in the screen). So, to prevent overlap, you need to specify a z-index:

#first {
  position: sticky;
  top: 10px;

  z-index: 2; // higher z-index than everything else
}

Full working example:

* {
  margin: 0;
  padding: 0;
}

p {
  text-align: justify;
}

.container {
  margin: 15px auto;
  border: 2px solid #FF0000;
  background-color: #69D818;
  width: 80%;
  height: 6000px;
}

h1 {
  background-color: #0013FF;
}

#first {
  position: sticky;
  top: 10px;


  z-index: 2; // higher z-index than everything else
}

#second {
  position: fixed;
  top: 200px;
}

#third {
  position: absolute;
  width: 100%;
  top: 250px;
}

#fourth {
  position: relative;
  top: 50px;
}

<div class="container">
  <h1 id="first">Position Sticky</h1>
  <h1 id="second">Position Fixed</h1>
  <h1 id="third">Position Absolute</h1>
  <h1 id="fourth">Position Relative</h1>
</div>

More information about the z-index property, you can go to:

Please signup or login to give your own answer.

Click here to cancel reply.