How to make div appear in front of another?

Question

<div style="position:relative; overflow:hidden; height:300px; z-index:1; background-color:red;">
    <ul style="position:relative; overflow:hidden; height:800px; z-index:2; background-color:blue;">
        <li>
            <div style="height:500px; background-color:black; position:relative; z-index:3;">
            This is div
            </div>
        </li>
    </ul>
</div>

1st question - From the above codes, the webpage shows 300px height of <ul> and 300px height of <div> only, how to make the webpage shows 800 height of <ul> and 500px height of <div> without changing overflow property and without changing the height of 1st <div>(300px)? Already got the answer from Omabena. I just need to change position of 1st div to static and ul to absolute.

<div style="overflow:hidden; position:static; height:300px;  background-color:red;">
<ul style=" position: absolute; overflow:hidden; height:1500px; background-color:blue;">
    <li>
        <table><tr><td>
            <div style="height:500px; background-color:black; position:static; z-index:3;">
                This is 2nd div
            </div>
        </td>
        <td>
            <div style="height:500px; background-color:green; position:relative; z-index:3;">
                This is 3rd div
            </div>
        </td></tr></table>
    </li>
</ul>
</div>

2nd question - From the above codes, how to make the webpage shows 300px height of 2nd div and 500px height of 3rd div. I mean the 2nd div must hide inside the 1st div which has 300px height only.

I tested the position:absolute, end up all divs and ul are gone, the webpage shows empty. — zac1987, Mar 31 '11 at 23:43

score 2 · Accepted Answer · answered Apr 01 '11 at 03:50

2

<div style="overflow:hidden; height:300px;  background-color:red;">
<ul style=" position: absolute;overflow:hidden; height:800px; background-color:blue;">
    <li>
        <div style="height:500px; background-color:black; position:relative; z-index:3;">
        This is div
        </div>
    </li>
</ul>

answered Apr 01 '11 at 03:50

omabena

3,561
1
17
13

Not sure if that makes it for you. – omabena Apr 01 '11 at 03:50
Wow. Cool. I guess I know what is my problem already. Thank you. I have other question, please refer to my updated question. Thanks. – zac1987 Apr 01 '11 at 05:39
The second question looks pretty tricky to me, not sure how to accomplish that without changing your html markup or breaking the natural flow of CSS – omabena Apr 04 '11 at 07:27

score 0 · Answer 2 · edited Mar 31 '11 at 23:17

0

<div style="position:relative; overflow:hidden; height:800px; z-index:1; background-color:red;">
    <ul style="position:relative; overflow:hidden; height:800px; z-index:2; background-color:blue;">
    <br/>
        <li>
            <div style="height:500px; background-color:white; position:relative; z-index:3;">
            This is div
            </div>
        </li>
    </ul>
</div>

edited Mar 31 '11 at 23:17

Diodeus - James MacFarlane

112,730
33
157
176

answered Mar 31 '11 at 23:17

pyth

451
1
5
12

how about without changing the height of 1st `
`(300px)? I have updated my question. Thank you.
– zac1987 Mar 31 '11 at 23:37

score 0 · Answer 3 · edited May 23 '17 at 10:33

0

The answer already exists.

Position an HTML element relative to its container using CSS

edited May 23 '17 at 10:33

Community

1
1

answered Mar 31 '11 at 23:17

Diodeus - James MacFarlane

112,730
33
157
176

no, the answer is not exists, the link that you show me is about the left, top, position property which is not related to my question. – zac1987 Apr 01 '11 at 00:14

score 0 · Answer 4 · answered Apr 01 '11 at 03:13

0

dose the div have to be nested can you use a container div and have you 1st div and UL at the same level then use position:absolute on the two

answered Apr 01 '11 at 03:13

1ftw1

656
2
14
26

i have no idea what are you talking about. Yes, I can use a container div. What is "have you 1st div at the same level" mean? – zac1987 Apr 01 '11 at 05:13

How to make div appear in front of another?

4 Answers4