CSS: absolute element inside an another absolute element

Question

I create a big div (div1 in the Fig 1.1) and set it to position: absolute. This div is the content container of the page, and inside this div are all the other elements. My reason to do absolute this div is for remove the bounce on scroll in browser:

Remove bounce on scroll in browser solution

My problem, is if I have other absolute divs inside the big one. In the Fig 1.1 can see the div2 with position:absolute, and if the div1 is scrolling, the div2 conduct is like a fixed element. Div2 is only an example, I have a lot of absolute elements like Popovers that to be relative is not an option.

How can I say to div2 (in the Fig 1.1 example) that when div1 scrolls moves along with page scrolling?

Code example

html, body {
    height: 100%;
    overflow: hidden;
}

.div1 {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   overflow: auto;
}

div2{
   position: absolute;
}

Image Example (Fig 1.1)

Correct way

I know that exist a lot of related answers, but all of them is quite different to my question.

Related questions:

Absolute positioning is a **very** poor method of laying out webpages. It is extremely inflexible and there are much better and more responsive options [**LearnLayout.com**](http://learnlayout.com/) — Paulie_D, Oct 08 '15 at 11:36
I *think* div1 should be position:relative and should be position: absolute. But it's difficult to tell without example code. On a side note, I don't think you should be changing the browser's default behaviour. People expect their browsers to behave a certain way (in fact, that's why they choose them) going againt the norm could damage affect your reputation. — Prinsig, Oct 08 '15 at 12:00
@Paulie_D set to `absolute` is the only way that I found to remove the bounce on scroll in browser. — Aral Roca, Oct 08 '15 at 12:10
@Prinsig I don't understand why you say to put absolute the body. I add now an example code in the question. — Aral Roca, Oct 08 '15 at 12:12

score 1 · Accepted Answer · answered Oct 08 '15 at 12:19

I have other solution. To fix iPad overscroll I wrote a small script, that fixes "scroll bouncing" / "overscroll"

https://github.com/aiboy/PerfectScrollFix

First of all, you don't need to change layout drastically and use absolute div's. Second, scroll is remains to be "native".

There is two problems thou: 1) For now only horizontal overscroll fix is supported 2) Your content ( that will be scrolled ) should be wrapped in a single element (wrapper)

You can test this script on iPad: http://jsbin.com/usomob/4

Source code of Example http://jsbin.com/usomob/4/edit

CSS: absolute element inside an another absolute element

Code example

Image Example (Fig 1.1)

Correct way

1 Answers1