how to stick component not relative to its direct parent component in css

userjcHL 0
Viewed 20

I have a situation, where position sticky is not working. what I'm trying to do is make below h1 component stick to the top.

.sticky {
position: sticky;
top: 0
}
<!DOCTYPE html>
<html>
<head>
  <title>Sticky Position List</title>
</head>
<body>
<div class="App">
   
      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>
      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>
      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>
      <div class="necessary-div">
        <div class="other-div"> </div>
        <h1 class="sticky">
          position sticky
        </h1>
      </div>
      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>
      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>

      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>
      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>

      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>
     
      <h2>
        Start editing to see some magic happen!
        <br />
      </h2>
      </div>
</body>
</html>

when I remove the div with the class name "necessary-div" it works fine. but i need it to work with that div.

thank you for your time.

position sticky css
2 Answers

Your div with the class "app" should have the styling: position: relative; ☺️

Simon Laustsen0

It's not working because the sticky div is sticking to the inside of necessary-div. Make necessary-div sticky and it'll work.

.necessary-div {
  position: sticky;
  top: 0;
}

.sticky {}
  <div class="App">
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <div class="necessary-div">
      <div class="other-div"> </div>
      <h1 class="sticky">
        position sticky
      </h1>
    </div>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
    <h2>
      Start editing to see some magic happen!
      <br />
    </h2>
  </div>

userurKQ0
Related