CODEWITHSUNDEEP
jqueryhtmlcss
Evert
Evert

Reputation: 99533

Multiple divs taking up the same container size

I'm building a basic slideshow system. The way it works is that there's a container that contains multiple slides:

<div class="container">
   <div class="slide active"></div>
   <div class="slide"></div>
</div>

Only 1 slide is active.

Now I'm trying to introduce a fade-in effect. In order to do this, for a brief moment 2 slides will be visible at the same time.

I'm animating this jQuery's animate function.

Before this it was pretty easy for every .slide to just take up 100% width and height of it's parent, but this no longer works well when I'm stacking multiple .slides with different z-indexes.

I thought of just using display: absolute, but I was not able to let every .slide take up exactly the size of .container.

Testing css:

.container {
   width: 400px;
   height: 300px;
}

.slide {
   opacity: 50%;

}

My question:

How can I have two .slide elements take up the exact same space (100% of it's parent's width and height) without specifying absolute values.

Upvotes: 1

Views: 37

Answers (1)

Stickers
Stickers

Reputation: 78686

When you use position relative and absolute together, you can use this trick.

.container {
  width: 200px;
  height: 100px;
  position: relative;
}
.slide {
  background: gold;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.active {
  background: aqua;
  z-index: 1; /*this slide should on top of the other one*/
}
<div class="container">
   <div class="slide active"></div>
   <div class="slide"></div>
</div>

Upvotes: 1

Related Questions