But, at least I know now that I'll never forget it again. Looking back at this now, it seemed silly that this approach didn't occur to me immediately. One solution is to remove your overflow:hidden from body and overflow-y:scroll from. Aside from nav-bars, it's a difficult experience to get right. The alerts continue to fire, so the styling is still being applied, it just isn't working. When possible, you should avoid a user experience (UX) in which fixed elements overlap with scrollable content. Why does -webkit-overflow-scrolling: touch affect absolute positioning, and is there a way around this UPDATE: I added an alert whenever a child element becomes 'fixed' or 'unfixed'. If you want the boxes to remain fixed in the corners, things get more complicated especially in a context that may or may not present a scrollbar. And, in the second approach, the four corner boxes are positioned relative to the inner content wrapper, which creates a more "intuitive" bounding box for the content.ĪSIDE: If you try the demo, you'll see that in the first approach the absolutely-positioned corner boxes scroll with the content. Now, when we run this code, we get the following output:Īs you can see, in the first approach, the four corner boxes are positioned relative to the overflow viewport. On single tap, at button location, following events are fired: content touchStart container touchStart //here CSS rule brings overlay forth content touchEnd container touchEnd container mouseEnter overlay mouseEnter button mouseEnter button clicked // the button gets clicked in same tap overlay clicked container clicked. In the first approach, the relative position is applied to the "overflow" container and, in the second approach, it's being applied to the content wrapper. This allows theĪbsolutely positioned elements to anchor to the bounding box of the content,Īs you can see, the main difference between the two approach lies in where the "position: relative" style is applied. This worked for me when I tried using position absolute, moving the element with top property and try to add a margin. Onto a content wrapper (contained within the overflow area). set a min-height of the container, the position will need to be changed from absolute to inherit, set the top property to a value of your choice and the display will need to be inline-block. Here, we're moving the position-anchoring off of the overflow container and Yay, content!Yay, content!Yay, content!Yay, content! Positioned elements to anchor to the actual viewport of the container. Here, the overflow container is, itself, acting as the anchor for the Using Position Absolute Inside A Scrolling Overflow Container When an element with the position: absolute style is placed into a container with the -webkit-overflow-scrolling: touch style, this element: - Is.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |