CODEWITHSUNDEEP
javascripthtml
Vainglory07
Vainglory07

Reputation: 5283

Float second div above first div

I have a canvas on div a and a gif image on div b. What I want to do is to hide my canvas without using display: none; by putting the div b over div a.

I achieve it before by using display none to hide div a. But now I want div ato stay there while div b floats above it.

This is the current scenario: JSFiddle

Upvotes: 0

Views: 80

Answers (3)

Gerico
Gerico

Reputation: 5169

I would wrap the two elements you want stacked in a container div and absolutely position div .b over div .a.

.a, .b { 
    width: 200px; 
    height: 30px; 
    text-align: center; 
}

.wrap{
    position: relative;
    margin: 0 auto; 
    width: 200px; 
    height: 30px; 
}

.a { 
    border: 1px solid red; 
    background: red;
}
.b { 
    border: 1px solid green; 
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: blue;
}

.container {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}

.xtra {
    width: 100%;
    height: 150px;
    background: #000;
}
<div class="container">
    <div class="xtra"></div>
    
    <div class="wrap">
        <div class="a">div a</div>
        <div class="b">div b</div>
    </div>
</div>

UPDATED FIDDLE

Upvotes: 2

Toni Feistauer
Toni Feistauer

Reputation: 411

try it with position absolute on div a. note that 

margin: 0 auto;

will not work here. so use 'left' and 'margin-left' to fix that.

jsfiddle

Upvotes: 2

emmanuel
emmanuel

Reputation: 9615

You could position them both absolute and set z-index to .b.

.a, .b {
    margin: 0 auto;
    width: 200px;
    height: 30px;
    text-align: center;
}
.a {
    border: 1px solid red;
    position: absolute;
}
.b {
    border: 1px solid green;
    position: absolute;
    z-index: 1;
}
.container {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
.xtra {
    width: 100%;
    height: 150px;
    background: #000;
}
<div class="container">
    <div class="xtra"></div>
    <div class="a">div a</div>
    <div class="b">div b</div>
</div>

Upvotes: 1

Related Questions