See:
That is, when the child element is too high, the parent element will not stay in the parent element as expected, but will float on the parent element, and its position will not change as it moves. The root cause is the "position: relative" of the child element" . Currently, this issue is only found in IE.
Page source code:
HTML code
-
- <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
-
- Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
- <Html>
- <Head>
-
- <Title>Relative bug</Title>
- meta HTTP-equiv = " Content-Type " content =< span style =" color: Blue; ">" text/html; charset = UTF-8 " />
- <Style Type="Text/CSS">
-
- <! --
-
- # Container {
- Background: blue;
-
- Height: 100px;
-
- Width: 300px;
-
- Overflow: auto;
- /* Position: relative ;*/
-
- }
-
- # Container>Div {
-
- Background: red;
- Height: 300px;
-
- Width: 150px;
-
- Margin: 0 auto;
-
- Position: relative;/* This statement triggers a bug */
- }
-
- -->
-
- </Style>
- </Head>
-
- <Body>
- Div id = " Container " >
- <Div></Div>
-
- </Div>
- </Body>
-
- </Html>
Solution:
Add the "position: relative" setting for the parent Element . In the preceding example, you only need to restore the # container annotation.
The following are normal pages:
