设置位置：固定元素尊重父项，位置：相对

debugcn 发表于 Dev

伊利亚

我刚刚发现，position: fixed如果您想在position: relative父级中使用元素，它们将无法正常工作，似乎它们始终引用窗口。我想知道是否有什么我可以做的，以尊重父div而不是窗口的边界，即绝对定位的div的行为如何？我知道，-webkit-sticky但是它对项目要求的支持还不够。

塞巴斯蒂安·奥尔森（Sebastian Olsen）

您可以尝试以下方法：

.container {
  background: grey;
  position: relative;
  top: 60px;
  overflow: visible;
}
.fixed {
  width: 100%;
  height: 55px;
  background: blue;
  position: absolute;
  top: 10px;
}
.scrollable {
  height: 200px;
  overflow: auto;
}

<div class="container">
  <div class="scrollable">HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element
    inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration
    text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative
    element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. HEre is some demonstration text that shows a "fixed"
    element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some
    demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!</div>
  <div class="fixed"></div>
</div>

基本上，将两个孩子放在一个父对象中，一个用于固定元素，一个用于所需的内容。绝对给定固定元素位置，您就很好了。

此外，如果只希望元素停留在内容的顶部或底部，请执行以下操作：

.container {
  background: grey;
  position: relative;
  top: 60px;
  overflow: visible;
}
.fixed {
  width: 100%;
  height: 55px;
  background: blue;
}
.scrollable {
  height: 200px;
  overflow: auto;
}

<div class="container">
  <div class="scrollable">HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element
    inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration
    text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative
    element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. HEre is some demonstration text that shows a "fixed"
    element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element.HEre is some
    demonstration text that shows a "fixed" element inside a position relative element.HEre is some demonstration text that shows a "fixed" element inside a position relative element. Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!Scroll me now! I am scrollable!</div>
  <div class="fixed"></div>
</div>

决定是否到达顶部或底部的是html。将固定元素放在内容之前，如果放在底部，则将其放在顶部。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。