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

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 >
   
      <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 >
        <div > </div>
        <h1 >
          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.

CodePudding user response：

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

CodePudding user response：

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 >
    <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 >
      <div > </div>
      <h1 >
        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>