Sticky top div with absolute positioning

问题:

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.

To make things a little clearer, check out this 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.

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.

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

回答1:

2018-6-18

I choose the CSS way with 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)

I also want the element position: absolute first,
and then position: sticky

Solution

1. parent HTML element use position: absolute to have the right position.

(don't forget to set height for parent. for example height:100%)

2. child HTML element position: sticky

work for me.

回答2:

edit
update with some enhancements
http://jsfiddle.net/aDdRS/11/

---

first post
Why not scroll just the .content and not the .content-area

http://jsfiddle.net/aDdRS/8/

回答3:

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

See http://jsfiddle.net/aDdRS/5/

回答4:

The alert scrolls with the content because it's inside the content-area which has 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.

回答5:

Use float: left; and width: 0; and you can use transform: translateX(xxx); for set left position.

Problem solved :)

回答6:

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