skip to Main Content

In this example the inner grey div should be behaving like a sticky div – so it sticks to the top of the screen when you scroll down the page – but that ain’t happening! What have I got wrong?

<div style="position: absolute; top: 150px; left: 150px; border: 1px solid red">
  <div style="position: sticky; top: 0; background-color: #ddd; padding: 20px; margin: 30px">
    Richard is the best
  </div>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

2

Answers


  1. Look like you are trying to use position: fixed to me, maybe i didn’t get your question right

    <html>
        <body>
        
        <div style="position: fixed; top: 150px; left: 150px; border: 1px solid red">
            <div>
                Richard is the best
            </div>
        </div>
        
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        
        </body>
        </html>
    Login or Signup to reply.
  2. The outer div has only the sticky element as a child so it has nothing to scroll.

    If you add the content inside the outer div it works fine.

    div {
      background: linear-gradient(white, blue);
    }
    
    div div {
      background: grey;
    }
    <div style="position: absolute; top: 150px; left: 150px; border: 1px solid red">
      <div style="position: sticky; top: 0; padding: 20px; margin: 30px">
        Richard is the best
      </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search