CODEWITHSUNDEEP
css
Alfred
Alfred

Reputation: 21396

display a div above another - css

I have a page with 7 divs as below;

<div id="container">
    <div id="head"></div>
    <div id="A">
        <div id="A1">A1</div>
        <div id="A2"></div>
    </div>
    <div id="B"></div>
    <div id="foot"></div>
</div>

The styling is like below;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#A, #B, #foot {
    position: absolute;
}
#head{
    background: #FF9900;
    width: 100%;
    height: 35px;
}
#A {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
}
#A1{
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#B {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #99CC00;
}
#foot{
    background: #0066CC;
    width: 100%;
    height: 35px;
    bottom: 0;
}

But my div A1 is not getting displayed. A working fiddle is here. I want to display div A1 above div B. How can I fix this??

Thanks in advance... :)

blasteralfred

Upvotes: 2

Views: 6102

Answers (5)

IMI
IMI

Reputation: 2469

Your #A1 div is being covered by you #B div. Add z-index:100; (or some other z-index number) to your #A div CSS. See example here http://jsfiddle.net/rGGEK/22/ .

Upvotes: 1

Nicholas Murray
Nicholas Murray

Reputation: 13509

Remove the margin-left: 200px; from your style for A1

#A1 {
    height: 35px;
    width: 35px;
    background-color: cyan;
}

Upvotes: 0

ysrb
ysrb

Reputation: 6740

It's because of the margin-left. If you reduce it to 10 px you can see it.

Upvotes: 0

unclenorton
unclenorton

Reputation: 1625

First, you somehow forgot the style for A1 in your fiddle :) Second, the parent container, A, is 200px wide, so your A1 starts just outside its right border.

Upvotes: 0

Rhapsody
Rhapsody

Reputation: 6077

It's the #A1 margin-left what causes the trouble.

#A has a width of 200px, and #A1.margin-left was set to 200px.

Upvotes: 3

Related Questions