CSS 具有绝对定位的粘性顶部 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8328886/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticky top div with absolute positioning
提问by Henrik Janbell
I'm using absolute positioning to have a div fill up the entire browser window. However, I wan't to combine this with a sticky div that sometimes is there and sometimes not.
我使用绝对定位让 div 填满整个浏览器窗口。但是，我不想将它与有时存在有时不存在的粘性 div 结合起来。
To make things a little clearer, check out this jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS/
为了让事情更清楚一点，请查看这个 jsFiddle：http: //jsfiddle.net/henrikandersson/aDdRS/
I want the "top", "left" and "subheader" to stay where they are at all times. I also want the "content" div to fill up what is left of the window. However, sometimes I want to display the "alert" div before "content". So far so good, as you can see in the jsFiddle. But, I want "alert" to stick to the "subheader" and stay there when scrolling. As you can see if you resize the window, "alert" will now be scrolled along with "content" - I don't want it to be.
我希望“顶部”、“左侧”和“副标题”始终保持原样。我还希望“内容”div 填充窗口的左侧。但是，有时我想在“内容”之前显示“警报”div。到目前为止一切顺利，正如您在 jsFiddle 中看到的那样。但是，我希望“警报”坚持“副标题”并在滚动时停留在那里。如您所见，如果您调整窗口大小，“警报”现在将与“内容”一起滚动 - 我不希望它如此。
Anyone got an idea of how to solve this?
任何人都知道如何解决这个问题？
EDIT: I made a change in my jsFiddle, I placed the "alert" where it should be (between subheader and content-area). As you can see ( http://jsfiddle.net/henrikandersson/aDdRS/12) it does not push the "content-area" down since content-area has top:20px. And I can't set top:40px for example since "alert" should be able to vary in height and I want content-area to have the same css with or without the alert above.
编辑：我对我的 jsFiddle 进行了更改，我将“警报”放置在它应该在的位置（在子标题和内容区域之间）。正如您所看到的（http://jsfiddle.net/henrikandersson/aDdRS/12），它不会将“内容区域”向下推，因为内容区域具有顶部：20px。而且我不能设置 top:40px 例如，因为“警报”应该能够在高度上有所不同，并且我希望内容区域具有相同的css，无论是否带有上面的警报。
EDIT #2: This question deals with the same problem, but there is no solution for that question either. Seems like it's not possible without using JavaScript: variable height scrolling div, positioned relative to variable height sibling
编辑#2：这个问题涉及同样的问题，但也没有针对该问题的解决方案。似乎不使用 JavaScript 是不可能的： 可变高度滚动 div，相对于可变高度兄弟定位
回答by NamNamNam
2018-6-18
2018-6-18
I choose the CSS way with position: sticky.
我选择 CSS 方式与position: sticky.
that https://github.com/abouolia/sticky-sidebar.
doesn't work for me (I am using Vue.js 2.0 SPA with vue-router & vuex)
那个https://github.com/aboulia/sticky-sidebar。
对我不起作用（我正在使用带有 vue-router 和 vuex 的 Vue.js 2.0 SPA）
I also want the element position: absolutefirst,
and then position: sticky
我也想要元素position: absolute先，
然后position: sticky
Solution
解决方案
- parent HTML element use
position: absoluteto have the right position.
- 父 HTML 元素用于
position: absolute拥有正确的位置。
(don't forget to set heightfor parent. for example height:100%)
（不要忘记height为父母设置。例如height:100%）
- child HTML element
position: sticky
- 子 HTML 元素
position: sticky
work for me.
为我工作。
回答by yunzen
edit
update with some enhancements
http://jsfiddle.net/aDdRS/11/
使用一些增强功能编辑更新
http://jsfiddle.net/aDdRS/11/
first post
Why not scroll just the .contentand not the .content-area
第一篇文章
为什么不滚动只是.content，而不是.content-area
回答by Tran Tien
Use float: left; and width: 0;and you can use transform: translateX(xxx); for set left position.
使用浮动：左；和宽度：0; 你可以使用转换：translateX(xxx); 用于设置左侧位置。
Problem solved :)
问题解决了 ：）
回答by ptriek
- Add fixed height & width 100% to alert + position:fixed
- Add padding-top to content
- Only downfall is of course the extra padding if there is no alert...
- 将固定高度和宽度 100% 添加到警报 + 位置：固定
- 将 padding-top 添加到内容
- 如果没有警报，唯一的失败当然是额外的填充......
回答by James Clark
The alert scrolls with the content because it's inside the content-area which has overflow-y: auto.
警报随内容滚动，因为它位于内容区域内，其中包含overflow-y: auto.
Move it out of the content-area (put it in between subheader and content-area), and remove the position: absolute(and top/left/right/bottom) attributes from the content. In that example I see no reason for content to be absolute-positioned, normal flow will put it where it wants to be.
将其移出内容区域（将其放在子标题和内容区域之间），并从内容中删除position: absolute（和顶部/左侧/右侧/底部）属性。在那个例子中，我认为没有理由将内容绝对定位，正常的流程会将它放在它想要的位置。
回答by Henrik Janbell
I chose to go with a JavaScript approach after all. Would have preferred a pure CSS approach but my need for IE8 support stood in the way. This answer by Myles Gray is pretty much what I did - https://stackoverflow.com/a/4933509/940517
毕竟我选择了 JavaScript 方法。本来更喜欢纯 CSS 方法，但我对 IE8 支持的需要阻碍了。Myles Gray 的这个答案几乎就是我所做的 - https://stackoverflow.com/a/4933509/940517
