4

w3.org mentions in it's definition of Sticky positioning, the following:

The position box is its margin box, except that for any side for which the distance between its margin edge and the corresponding edge of its containing block is less than its corresponding margin, that distance is used in place of that margin.

I have tried to replicate this scenario

.container {
  height: 100px;
  background: lightgray;
  overflow: auto;
}

.content {
   background: gray;
   border: 1px dotted red;
}

button {
  position: sticky;
  top: 40px;
  margin: 30px 0;
}

.spacer {
  height: 300px; 
}
<div class="container">  
  <div class="content">
    <button>sticky</button>
  </div>
  <div class="spacer"></div>
</div>

Now the distance between sticky element's margin edge and the corresponding edge of its containing block is 0 which is less than the its corresponding margin(40px), so according to w3.org's definition the position box should not be the margin box, instead should be sticky element's size plus 0. But as you can see in the example, position box is still respecting the margin.

Please explain why is position box still same as margin box.

user31782
  • 7,087
  • 14
  • 68
  • 143
  • 1
    I tried to make sense of the definition on w3.org, but I interpret it the same way as you do. So either we misinterpret it, or there's something wrong with the definition. I thought it could have something to do with the button being an inline element, but that seems not to be the case... The behavior you describe is even clearer when you make `.content` sticky: with `top: 40px;` and `margin: 30px 0;`, there's 40px of space on top, but if you put something like `top: 20px;` and `margin: 30px 0;`, there's 30px of space on top. So it goes against what the definition says. – Camelopardalus Jun 14 '22 at 08:42
  • Your nested button sticky position is actually working. It seems not working because your parent container is too short and container is out of the view before your button stick to the top. See the question https://stackoverflow.com/questions/45221719/apply-position-sticky-to-child-of-a-div – saboshi69 Jun 15 '22 at 07:05
  • 1
    @saboshi69 That's not the point. It _should work_ if w3.org's definition is followed. – user31782 Jun 15 '22 at 07:42

0 Answers0