Question

我刚刚发现position: fixed个元素如果你想在position: relative父级中使用它们就不会有效，看起来它们总是指向窗口。我想知道是否有任何我可以做的事情来尊重父div而不是窗口的界限，即div的绝对位置如何？我知道-webkit-sticky但是它的支持不足以满足项目要求。

Answer 1

你可以试试这个：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

基本上，将两个子项放在父项中，一个用于固定元素，一个用于所需内容。给固定元素位置绝对，你很高兴。

此外，如果您只想将元素粘贴到内容的顶部或底部，请执行以下操作：

＆＃13;

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

＆＃13;

<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>

＆＃13;

决定它是否位于顶部或底部是在html中。将固定元素放在内容之前，如果你把它放到底部之后它就会显示在顶部。

使位置：固定元素尊重父级的位置：相对

1 个答案: