Position absolute and overflow hidden
Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.
css-position
Targeting position:sticky elements that are currently in a ‘stuck’ state
There is currently no selector that is being proposed for elements that are currently ‘stuck’. The Postioned Layout module where position: sticky is defined does not mention any such selector either. Feature requests for CSS can be posted to the www-style mailing list. I believe a :stuck pseudo-class makes more sense than a ::stuck pseudo-element, … Read more
My position: sticky element isn’t sticky when using flexbox
Since flex box elements default to stretch, all the elements are the same height, which can’t be scrolled against. Adding align-self: flex-start to the sticky element set the height to auto, which allowed scrolling, and fixed it. Currently this is supported in all major browsers, but Safari is still behind a -webkit- prefix, and other … Read more
Have a fixed position div that needs to scroll if content overflows
The problem with using height:100% is that it will be 100% of the page instead of 100% of the window (as you would probably expect it to be). This will cause the problem that you’re seeing, because the non-fixed content is long enough to include the fixed content with 100% height without requiring a scroll … Read more
Absolute positioning ignoring padding of parent
First, let’s see why this is happening. The reason is that, surprisingly, when a box has position: absolute its containing box is the parent’s padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent’s content box. Here … Read more
Relatively position an element without it taking up space in document flow
What you’re trying to do sounds like absolute positioning. On the other hand, you can, however, make a pseudo-relative element, by creating a zero-width, zero-height, relatively positioned element, essentially solely for the purpose of creating a reference point for position, and an absolutely positioned element within that: <div style=”position: relative; width: 0; height: 0″> <div … Read more
Make div stay at bottom of page’s content all the time even when there are scrollbars
This is precisely what position: fixed was designed for: #footer { position: fixed; bottom: 0; width: 100%; } Here’s the fiddle: http://jsfiddle.net/uw8f9/
How does the “position: sticky;” property work?
Check if an ancestor element has overflow set (e.g. overflow:hidden); try toggling it. You may have to inspect the DOM tree higher than you expect =). This may affect your position:sticky on a descendant element.
Center a position:fixed element
You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div’s height and width to shift the center towards the middle of the div. Thus, provided a <!DOCTYPE html> (standards mode), this … Read more
Fixed position but relative to container
Short answer: no. (It is now possible with CSS transform. See the edit below) Long answer: The problem with using “fixed” positioning is that it takes the element out of flow. thus it can’t be re-positioned relative to its parent because it’s as if it didn’t have one. If, however, the container is of a … Read more