时间戳

首页 > 解决方案 > 在父元素粘在页面顶部后保持元素的相对定位？

html - 在父元素粘在页面顶部后保持元素的相对定位？

问题描述

假设我有 3 个元素，当用户在页面上滚动时，我希望它们始终在彼此前面。但是当元素到达页面顶部时，它们将保持在页面顶部并保持与父级的相对位置。我怎样才能用css实现这一点？

图片解释我的问题：https ://i.imgur.com/ipQBRfv.png

我正在考虑类似于父 div 的东西sticky，它会有 3 个子元素absolute，但问题是虽然我可以操纵top, down, ... 将这 3 个元素定位在我希望它们相对于父级，当父级到达页面顶部并触发position: sticky时，这些偏移值也将是 的阈值sticky，但我希望它们都保持相对于父级的位置。

例子：

.push {
  height: 600px;
  width: 10px;
}

.parent {
  position: sticky;
  top: 0;
}

.child1 {
  position: absolute;
  top: 10px;
}

.child2 {
  position: absolute:
  top: 5px;
}

.child3 {
  position: absolute;
  top: 3px;
}
<div class="push"></div>

<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
  <div class="child3">Child 3</div>
</div>

<div class="push"></div>

标签： htmlcss

解决方案

从 MDN位置属性页面（https://developer.mozilla.org/en-US/docs/Web/CSS/position#values）：

绝对定位解释如下：

该元素会从正常的文档流中移除，并且不会在页面布局中为该元素创建空间。它相对于其最近的定位祖先进行定位。

稍后在同一页面（https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning）：

定位元素是其计算位置值是相对、绝对、固定或粘性的元素。（换句话说，它不是静态的。）

因此，放置在粘性父元素内的绝对定位元素应该相对于粘性父元素。

我使用您自己的代码制作了一个快速片段，根据您的图片，它似乎定位正常。

绝对定位子级的代码中缺少属性left或right 。

html, body {
  margin: 0;  
}

.parent {
  position: sticky;
  top: 0;
  background: red;
  height: 100px;
}

.child1 {
  position: absolute;
  top: 10px;
  left: 100px;
  width: 50px;
  background: green;
  padding: 10px;
}

.child2 {
  position: absolute;
  top: 5px;
  left: 200px;
  width: 50px;
  background: blue;
  padding: 10px;
}

.child3 {
  position: absolute;
  top: 3px;
  left: 300px;
  width: 50px;
  background: yellow;
  padding: 10px;
}
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="parent">
  <div class="child1">1</div>
  <div class="child2">2</div>
  <div class="child3">3</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

您可以在 CodePen 上查看：https ://codepen.io/agarccav/pen/PoKxVzG

推荐阅读