CODEWITHSUNDEEP
htmlcss
zac1987
zac1987

Reputation: 2777

How to make div appear in front of another?

<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.

Upvotes: 1

Views: 11467

Answers (4)

omabena
omabena

Reputation: 3581

<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>

Upvotes: 2

1ftw1
1ftw1

Reputation: 666

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

Upvotes: 0

pyth
pyth

Reputation: 471

<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>

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114427

The answer already exists.

Position an HTML element relative to its container using CSS

Upvotes: 0

Related Questions