Overlapping divs are observed when utilizing absolute positioning in CSS

Question

Overlapping divs are observed when utilizing absolute positioning in CSS

I am facing a challenge with placing the div identified by our_team below the div with the ID of services. When I use absolute positioning, the former ends up overlapping the latter.

The services div transitions to display information when hovered over due to its absolute positioning. On the other hand, the our_team div only contains header and paragraph tags but still overlaps the first div.

If I try removing the absolute positioning, the arrangement of the divs is correct, but it results in white blocks when flipped. https://i.sstatic.net/9TIaw.png

However, upon adding the absolute positioning, the divs end up overlapping each other. https://i.sstatic.net/CVRW1.png

For the HTML & CSS code, you can refer to this link: https://jsfiddle.net/dasasathyan/8rjoqdnt/

html css bootstrap-4

Answer 1

Answer №1

Struggling to follow the original format? Consider this alternative approach using flexbox in HTML:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92ddcacc92959295">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46190616090505061728162707020244">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</head>

<body>
  <div id="main_container">
    <div id="services">
      <div id="row1_cards">
        <div id="left_card">
          <div class="flip-card-front">
            <h3> Some Heading 1 that flips of first DIV </h3>
            <h6>1st Heading Description</h6>
          </div>
          <div class="flip-card-back">
            <ul class="services_list">
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
            </ul>
          </div>
        </div>

        <div id="right_card">
          <div class="flip-card-front">
            <h3> Some Heading 2 that flips of first DIV </h3>
            <p>2nd Heading Description</p>
          </div>
          <div class="flip-card-back">
            <ul class="services_list">
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div id="our_team">
      <div id="row2_team">
        <div class="col">
          <p>2nd Div that should come under the 1st Div</p>
        </div>
        <div class="col">
          <p>2nd Div that should come under the 1st Div</p>
        </div>
      </div>
    </div>
  </div>
</body>

Take on a new challenge with this CSS layout:

#main_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 750px;
  height: auto;
}
#row1_cards {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
#row2_team {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
#left_card {
  width: auto;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
#right_card {
  width: auto;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.flip-card-front {
  position: relative;
  width: inherit;
  height: inherit;
  padding: 45px 20px 0 20px;
  background: linear-gradient(to bottom, #0068a5 0%, #003367 100%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-back {
  position: relative;
  top: -200px;
  width: inherit;
  height: inherit;
  background-color: #2980b9;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
#left_card:hover {
  transform: rotateY(180deg);
}
#right_card:hover {
  transform: rotateY(180deg);
}

Answer 2

Struggling to follow the original format? Consider this alternative approach using flexbox in HTML:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92ddcacc92959295">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46190616090505061728162707020244">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

</head>

<body>
  <div id="main_container">
    <div id="services">
      <div id="row1_cards">
        <div id="left_card">
          <div class="flip-card-front">
            <h3> Some Heading 1 that flips of first DIV </h3>
            <h6>1st Heading Description</h6>
          </div>
          <div class="flip-card-back">
            <ul class="services_list">
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
            </ul>
          </div>
        </div>

        <div id="right_card">
          <div class="flip-card-front">
            <h3> Some Heading 2 that flips of first DIV </h3>
            <p>2nd Heading Description</p>
          </div>
          <div class="flip-card-back">
            <ul class="services_list">
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
              <li>Some List Item</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div id="our_team">
      <div id="row2_team">
        <div class="col">
          <p>2nd Div that should come under the 1st Div</p>
        </div>
        <div class="col">
          <p>2nd Div that should come under the 1st Div</p>
        </div>
      </div>
    </div>
  </div>
</body>

Take on a new challenge with this CSS layout:

#main_container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 750px;
  height: auto;
}
#row1_cards {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
#row2_team {
  display: flex;
  flex-direction: row;
  gap: 50px;
}
#left_card {
  width: auto;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
#right_card {
  width: auto;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.flip-card-front {
  position: relative;
  width: inherit;
  height: inherit;
  padding: 45px 20px 0 20px;
  background: linear-gradient(to bottom, #0068a5 0%, #003367 100%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flip-card-back {
  position: relative;
  top: -200px;
  width: inherit;
  height: inherit;
  background-color: #2980b9;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
#left_card:hover {
  transform: rotateY(180deg);
}
#right_card:hover {
  transform: rotateY(180deg);
}

Answer 3

Answer №2

To avoid issues with defining heights for elements, it's best to steer clear of absolute positioning (as demonstrated). A more effective approach would be to utilize a different method for positioning and flipping your cards using flex.

You can create transitions using z-index values (e.g.

transition: z-index, transform 0.6s;

) and adjust the element positions like so:

.flip-card-back {
    background-color: #2980b9;
    transform: rotateY(180deg) translate(100%, 0);
}

This way, you can eliminate the need for using position: absolute entirely. I've made some tweaks to the fiddle to demonstrate this, and you can further customize the styling to fit your requirements (such as making all cards the same height as the tallest element).

Modified Fiddle: https://jsfiddle.net/pie9/ftr6w9sj/

MDN docs for translate() MDN docs for z-index

Answer 4

To avoid issues with defining heights for elements, it's best to steer clear of absolute positioning (as demonstrated). A more effective approach would be to utilize a different method for positioning and flipping your cards using flex.

You can create transitions using z-index values (e.g.

transition: z-index, transform 0.6s;

) and adjust the element positions like so:

.flip-card-back {
    background-color: #2980b9;
    transform: rotateY(180deg) translate(100%, 0);
}

This way, you can eliminate the need for using position: absolute entirely. I've made some tweaks to the fiddle to demonstrate this, and you can further customize the styling to fit your requirements (such as making all cards the same height as the tallest element).

Modified Fiddle: https://jsfiddle.net/pie9/ftr6w9sj/

MDN docs for translate() MDN docs for z-index

Overlapping divs are observed when utilizing absolute positioning in CSS

Answer №1

Answer №2

Similar questions

I need to update the class definition of a navigation menu item that contains an "a" tag with the class "section-link". How can I dynamically add the class "popover-link-a" to this definition using JavaScript?

How to trigger the submission of a form within the submission event of another form using jQuery

Invalid argument type and beyond acceptable range: file:///c:/Tools/MYScript.hta

Determining the true width of a span element using jQuery

Tips for getting a browser to clear the cache specifically for the .html files on your website

Tips for transforming an SQL Server query into JSON format

24-hour countdown tool featuring a visual progress bar

Adding Edit and Delete Functionality to MySQL Database using PHP

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

Opening a PHP file without performing thorough validation in JavaScript can lead to security vulnerabilities

The vertical alignment of the button text with SVG is not properly aligned

Preventing document.getElementById from throwing errors when the element is null

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

Leveraging .Net ConfigurationManager.AppSettings in Cascading Style Sheets

Arrange a cluster of CSS table cells onto a fresh line

Discrepant alignment of form group among the other elements in Bootstrap CSS

HTML Brickwork Picture Arrangement

Only referring to a CSS class within a particular element

Creating two columns using React and Material-UI Grid while utilizing just one map function for iteration

PHP code to create a search form with a dropdown menu