CODEWITHSUNDEEP
css
shell
shell

Reputation: 1937

Stacking elements with CSS

Is there a property that allows one element in a div to stack over another element in the same div?

I know with two divs you can use position: relative; & position: absolute; to get this working, but with two elements in the same div I'm not sure what to do.

Upvotes: 0

Views: 226

Answers (1)

justinw
justinw

Reputation: 3966

If you would like to "stack" elements on top of each other, yes you can use the position property.

You would use z-index to alter stack order; the element with the higher z-index would be in front of an element with the lower z-index.

You can see this here, in this fiddle.

.el1 {
    height: 100px;
    width: 100px;
    background: yellow;
    position: relative;
    z-index: 1;
}

.el2, .el3 {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0;
    left: 0;
    background: blue;
    z-index: 2;
}

.el3 {
    background: green;
    z-index: 3;
    top: 5px;
    left: 5px;
}
<div class="el1">
    <div class="el2">el2</div>
    <div class="el3">el3</div>
</div>

Upvotes: 3

Related Questions