As soon as i put [ position:absolute ] my Divs disappear!

1

I’m trying to make Flipabale cards, with info on both sides.
As soon as I put [position: absolute] in classes front and back. My cards disappear.

I’ve Used **Bootstrap 4.3.1 **

HTML

<div class = "col-12 col-md-4">
	<div class="card-flip" id="card1">
		<div class="flip">
			<!-- FRONT SIDE OF THE CARD -->
			<div class="front">
				<div class="card">
					<div class="img-container">
						<img src="" class="card-img-top" alt="...">
					</div>
					<div class="card-body">
						<h5 class="card-title text-light">Slack Community Workshop</h5>
						<p class = "text-light"><strong class = "text-light">Date:</strong class = "text-light"> September 8, 2019 </p>
						<p class = "text-light"><strong class = "text-light">Time:</strong class = "text-light"> 1:00 PM to 3:30 PM </p>
						<p class = "text-light"><strong class = "text-light">Venue:</strong class = "text-light"> Witty Feed, Shekhar Central</p>
					</div>
					<div class="card-footer text-center">
						<button class="btn btn-warning">Read more</button>
					</div>
				</div>
			</div>

			<!-- BACK SIDE -->
			<div class="back">
				<div class="card">
					<div class = "img-container">
					</div>
					<div class="card-body">
						<p class = "text-light">Some more info</p>
					</div>
					<div class="card-footer text-center">
						<button href="" class="btn btn-warning">View event page</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

CSS

.card-flip, {
	perspective: 1000px;
	cursor: pointer;
	transition: 0.6s;
	transform-style: preserve-3d;
}
.flip {
	perspective: 1000px;
	transform: rotateY(180deg);
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}
.front{
	  transform: rotateY(180deg);
}
.back {
	transform: rotateY(0deg);
}
.front,
.back {
	backface-visibility: hidden;
	position: absolute;
	width:100%;
	height:100%;
}
1 Like
2

Using position: absolute means its going to be absolute inside the container. If you didn’t specify where you want the element is at, it will be just disappear (having a width of 0) or will go somewhere else inside the container. You can specify it using the top, left, bottom, and right CSS attribute.

2 Likes
3

Okay thanks will try that,
I am creating a list of horizontally scrollable cards so will i have to position each card separately? @Catalactics

4

You really just need to give some dimensions so they don’t collapse (container or the cards).

Here is an example pen (not sure if that is what you mean by horizontally scrollable cards).

1 Like
5

but if I give height:100% to .flip shouldn’t it also work? I don’t understand why do I have to give a specific height in px ? @lasjorg

Oh btw this worked (giving height in px) Thanks

7

When using percentages, what you always have to ask yourself is, percentage of what?

The absolutely positioned child element is making the parent container(s) collapse, the parent container(s) have 0 height, 100% of 0 is…what? It’s basically like if it had no content inside it.

If you give the parent an absolute height you can let the child’s height be 100% relative of that. If you only set an absolute height on the child it will have that height but the parent will still be collapsed (height 0) because the child does not affect the parent (the absolutely positioned child element is removed from the document flow).

1 Like