CSS Position Property: Sticky and absolute

Question

* {
  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

You can fix the position: absolute issue by adding positive: relative to .container. (position: absolute is relative to its nearest position: relative ancestor.) What behavior did you want from the position: sticky? It seems to stick, but overlaps other items — is that the problem? — edemaine
– edemaine, Commented May 28, 2023 at 16:03
I want position:sticky to stick on the top when I scroll down but it doesn't happen. It stick only when when I scroll upward. And another problem is with position: absolute. I have given width:100% but that heading goes out of the div container. — Himanshu Raj
– Himanshu Raj, Commented May 28, 2023 at 18:43

imhvost · Accepted Answer · 2023-05-28 20:53:19Z

-1

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>

edited May 28, 2023 at 20:53

answered May 28, 2023 at 20:47

imhvost

11.7k2 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

imhvost Over a year ago

@ethry What upset you about the number 666? Because your 2, from your own logic, is also absurd, because you could set 1 ))

ethry · Accepted Answer · 2023-05-28 20:56:29Z

-1

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:

answered May 28, 2023 at 20:56

ethry

85210 silver badges19 bronze badges

1 Comment

Himanshu Raj Over a year ago

Still not working but I have fix the issue by adjusting the size of the position: absolute; heading to 60%.

Collectives™ on Stack Overflow

CSS Position Property: Sticky and absolute

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related