使位置：固定元素尊重父级与位置：相对(Make position: fixed element respect parent with position: relative)
我刚刚发现了这个position: fixed元素如果你想要它们在position: relative内不能正常工作position: relative父级，似乎它们总是引用窗口。 我想知道是否有任何我可以做的事情来尊重父div而不是窗口的界限，即div的绝对位置如何？ 我知道-webkit-sticky但是它的支持还不足以满足项目要求。
I just found out that position: fixed elements don't work well if you want them within position: relative parent, it seems they always refer to window. I was wondering if there is anything I could do for it to respect boundaries of a parent div not window i.e. how absolutely positioned div would behave? I know of -webkit-sticky however its support is not enough for the project requirements.
最满意答案
你可以试试这个：
.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中。 将固定元素放在内容之前，如果你将它放到底部之后它会在顶部。
You could try this:
.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>
Basically, put two childs inside a parent, one for the fixed element, and one for the content you want. Give the fixed element position absolute and you're good to go.
Additionally, if you just want the element to stick to either the top or bottom of the content do this:
.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>
What decides if it goes to the top or bottom is in the html. Put the fixed element before the content and it will go on top, if you put it after it goes to the bottom.
更多推荐
发布评论