CODEWITHSUNDEEP
htmlcss
Merlin
Merlin

Reputation: 978

How can I position pure CSS playing card-style divs under the top one?

I am trying to position styled divs under each other in the manner of playing cards, however at the moment I've been unable to get it to work.

The effect being generated looks like this:

enter image description here

However, I'd like additional cards to be hidden by the top card - these might end up being generated by a loop.

This is the HTML and CSS I have at the moment: 

<div class="catCards">
  <div class="cwCard">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>

  <div class="cwCard cardUnder">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>

  <div class="cwCard cardUnder">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>      

</div>

-

.cwCard {
    margin: 0 auto;
    width: 160px;
    border: #FFF solid 1px;
    border-radius: 5px;
    background: #3d3d3d;
    overflow: hidden;
    box-shadow: 0px 4px 16px #000000cb;
    z-index: 5;
}

.cwCTitle {
    padding: 3px;
    border-bottom: 1px solid #FFF;
}

.cwImage {
    margin: 0 auto;
    width: 130px;
    height: 130px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

.cwValue {
    width: 100%;
    text-align: center;
    padding: 4px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.cardUnder {
    z-index: 2;
}

The catCards rule is empty, and there is no other HTML beyond a basic page layout. The cardUnder rule has been largely for testing variations.

EDIT: If possible, I would like to avoid position: absolute and use Flex. At least, assuming that might work. Prior testing couldn't keep the cards inside set columns using absolute, so I decided to get the stacking working first.

Upvotes: 0

Views: 760

Answers (3)

Mart
Mart

Reputation: 9

As Mark pointed out use position to get Z-index to work,

position:absolute;
top:0;
left:0;

Upvotes: 0

Suman Kundu
Suman Kundu

Reputation: 1742

margin-top may help: 

.catCards {
  margin-top: 210px; /* added */
}
.cwCard {
    margin: -200px auto 0 auto; /* added */
    width: 160px;
    border: #FFF solid 1px;
    border-radius: 5px;
    background: #3d3d3d;
    overflow: hidden;
    box-shadow: 0px 4px 16px #000000cb;
    z-index: 5;
}

.cwCTitle {
    padding: 3px;
    border-bottom: 1px solid #FFF;
}

.cwImage {
    margin: 0 auto;
    width: 130px;
    height: 130px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

.cwValue {
    width: 100%;
    text-align: center;
    padding: 4px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.cardUnder {
    z-index: 2;
}
<div class="catCards">
  <div class="cwCard">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>

  <div class="cwCard cardUnder">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>

  <div class="cwCard cardUnder">
    <div class="cwCTitle">Title</div>
    <div class="cwImage"></div>
    <div class="cwValue">Value <br> 100 pts</div>
  </div>      

</div>

Upvotes: 0

Mark B
Mark B

Reputation: 682

You are not positioning your divs on the page, they are behaving as they should following the flow of page elements, you need to set the position of the divs to be the same then use z-index to put the top one on top.

Mark

Upvotes: 1

Related Questions