Tips on creating vertical stacked content utilizing CSS

Question

Tips on creating vertical stacked content utilizing CSS

Has anyone come across this game before?

https://i.sstatic.net/hFX9o.png

I am trying to stack each card in a column, here is my fiddle jsfiddle.

In my scenario, I have cards wrapped in div elements with a maximum height. If a card exceeds this height, it should not collapse or hide, but instead be stacked on top.

This is what currently happens in my code https://i.sstatic.net/tCKNj.png

I want it to look like this, with each card stacked https://i.sstatic.net/4Feyc.png

HTML

<div class="wrapper">
  <div class="card card-1">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-2">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
  
  <div class="card card-3">
    <h4 class="header-title">
      Lorem Ipsum
    </h4>
    <div class="card-body">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
</div>

CSS

.wrapper{
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow: hidden;
}
.card{
  padding: 0.4em 1rem;
  width: 250px;
  border-radius: 5px;
  margin: 0.5rem;
}
.card.card-1{
  background: salmon;
  border: 2px solid red;
}
.card.card-2{
  background: royalblue;
  border: 2px solid blue;
}
.card.card-3{
  background: greenyellow;
  border: 2px solid limegreen;
}

Any ideas on what I should do to achieve this?

javascript html css bootstrap-4

Answer 1

Answer №1

Have you experimented with utilizing the z-index property? It lets you define the stacking order of an element.

For instance:

.container{
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow: hidden;
}
.box{
  padding: 0.4em 1rem; 
  width: 250px;
  border-radius: 5px;
  margin: 0.5rem;
}
.box.box-1{
  background: salmon;
  border: 2px solid red;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -3;
}
.box.box-2{
  background: royalblue;
  border: 2px solid blue;
  position: absolute;
  left: 0px;
  top: 15px;
  z-index: -2;
}
.box.box-3{
  background: greenyellow;
  border: 2px solid limegreen;
  position: absolute;
  left: 0px;
  top: 30px;
  z-index: -1;
}

<div class="container">
  <div class="box box-1">
    <h4 class="title">
      Lorem Ipsum
    </h4>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>

  <div class="box box-2">
    <h4 class="title">
      Lorem Ipsum
    </h4>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>

  <div class="box box-3">
    <h4 class="title">
      Lorem Ipsum
    </h4>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
</div>

Answer 2

Have you experimented with utilizing the z-index property? It lets you define the stacking order of an element.

For instance:

.container{
  display: flex;
  flex-direction: column;
  max-height: 75vh;
  overflow: hidden;
}
.box{
  padding: 0.4em 1rem; 
  width: 250px;
  border-radius: 5px;
  margin: 0.5rem;
}
.box.box-1{
  background: salmon;
  border: 2px solid red;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -3;
}
.box.box-2{
  background: royalblue;
  border: 2px solid blue;
  position: absolute;
  left: 0px;
  top: 15px;
  z-index: -2;
}
.box.box-3{
  background: greenyellow;
  border: 2px solid limegreen;
  position: absolute;
  left: 0px;
  top: 30px;
  z-index: -1;
}

<div class="container">
  <div class="box box-1">
    <h4 class="title">
      Lorem Ipsum
    </h4>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>

  <div class="box box-2">
    <h4 class="title">
      Lorem Ipsum
    </h4>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>

  <div class="box box-3">
    <h4 class="title">
      Lorem Ipsum
    </h4>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque iusto molestiae eos totam ea, ratione quis veritatis commodi,
      </p>
    </div>
  </div>
</div>

Answer 3

Answer №2

It's unclear what the intention is behind that action, as it could make the text on the upper cards hard to read. However, a possible solution could be implemented as shown below:

var startingPosition = 0;
var incrementBy = 20;

$('.card').each(function(i, obj) {
    $(this).css('top', startingPosition);
    startingPosition = startingPosition + incrementBy;
});

#container{
  position: relative;
}

.card{
  position:absolute;
  width:200px;
  height:100px;
}

.orange{
  background-color: orange;
}

.purple{
  background-color: purple;
}

.yellow{
  background-color: yellow;
}

.green{
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <div class="card orange">A</div>
    <div class="card purple">B</div>
    <div class="card yellow">C</div>
    <div class="card green">D</div>
</div>

Answer 4

It's unclear what the intention is behind that action, as it could make the text on the upper cards hard to read. However, a possible solution could be implemented as shown below:

var startingPosition = 0;
var incrementBy = 20;

$('.card').each(function(i, obj) {
    $(this).css('top', startingPosition);
    startingPosition = startingPosition + incrementBy;
});

#container{
  position: relative;
}

.card{
  position:absolute;
  width:200px;
  height:100px;
}

.orange{
  background-color: orange;
}

.purple{
  background-color: purple;
}

.yellow{
  background-color: yellow;
}

.green{
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
    <div class="card orange">A</div>
    <div class="card purple">B</div>
    <div class="card yellow">C</div>
    <div class="card green">D</div>
</div>

Tips on creating vertical stacked content utilizing CSS

Answer №1

Answer №2

Similar questions

The JQuery script functions properly when directly embedded in an HTML file, but fails to work when linked from an external file

Issues encountered in loading JavaScript with jQuery script

Creating mock implementations using jest in vue applications

Having trouble getting my Node.js Express code to display 'Hello World' on Cloud 9 platform

Determine the output based on the data received from the ajax post request

The Bootstrap alert refuses to close when the close button is clicked

Is it possible to apply styles to the body of a document using styled-components?

Text box is not automatically filling up when selecting from dropdown menu

Obtain data from an external XML source using jQuery

Sending a XML file from a Vue application to an ASP.NET Core backend using axios

Tips for refreshing a GET request within a Vue.js application

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

Determine whether the child element extends beyond the boundaries of the parent element

How can I create a component that dynamically adjusts to different screen sizes

Show one marker on the map from a GeoJson file

Change the duration of a CSS animation rotation using jQuery and an input range control

Steps for creating a Java Script method within a Java Script constructor

What could be the reason for the scope being empty in my AngularJS application?

Using AngularJS to handle form data without ng-model

What is the best way to make a block fill 100% of a container-fluid?