CSS Sticky attribute is not working in this demo

Question

when I am coding , I find that position : sticky is not working. This is a simple demo.

<!DOCTYPE html>
<html>
  <head> </head>

  <body style='height: 2000px;'>
    <div>
      <div>
        <div>
          <div style="height: 300px">
            <div
              style="
                top: 87px;
                height: 40px;
                background: blue;
                margin-top: 10px;
                position: sticky;
                position: -webkit-sticky;
              "
            ></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

The effect I wanted in this example was not achieved。Is there something wrong with me ？

It is sticking up to height of `300px` and this is the behavior of sticky to extend up to its container element — Rana, Oct 27 '21 at 09:49

score 0 · Accepted Answer · answered Oct 27 '21 at 09:50

0

Position sticky is related to closest parent - in your example to element with height 300px and thats working fine :)

answered Oct 27 '21 at 09:50

MrKarioX

41
3

score 0 · Answer 2 · answered Oct 27 '21 at 09:54

It is sticky up to height of 300px and this is the behavior of sticky to extend up to its container element , after that it will become a normal default positioned element .

Added a background-color for visuals for how far your element is working as sticky

<!DOCTYPE html>
<html>

<head> </head>

<body style='height: 2000px;'>
  <div>
    <div>
      <div>
        <div style="height: 300px;background-color:rgba(126, 125, 125, 0.5);">
          <div style="
                top: 87px;
                height: 40px;
                background: blue;
                margin-top: 10px;
                position: sticky;
                position: -webkit-sticky;
              "></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

CSS Sticky attribute is not working in this demo

2 Answers2