When I utilize position absolute, the elements start overlapping each other

Question

When I utilize position absolute, the elements start overlapping each other

I am currently working on displaying sidebar content within tabs, and I need to adjust the height dynamically based on the content. However, I encountered an issue where the elements above and below the tabs are overlapping. To address this problem, I removed the CSS property position: absolute;. While this did resolve the overlap, it caused the second div to fall down to the bottom of the page.

Check out this fiddle


          .tabs {
            /* CSS styling for tabs */
          }

          /* More CSS rules here */


          <!-- HTML code snippet -->

css tabs

Answer 1

Answer №1

To make the checked content display properly, ensure that you include "position: relative":

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity ease-out 0.2s 0.1s;
  -moz-transition: opacity ease-out 0.2s 0.1s;
  -o-transition: opacity ease-out 0.2s 0.1s;
  -ms-transition: opacity ease-out 0.2s 0.1s;
  transition: opacity ease-out 0.2s 0.1s;
  position:relative;
}

Check out the updated fiddle here

Answer 2

To make the checked content display properly, ensure that you include "position: relative":

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity ease-out 0.2s 0.1s;
  -moz-transition: opacity ease-out 0.2s 0.1s;
  -o-transition: opacity ease-out 0.2s 0.1s;
  -ms-transition: opacity ease-out 0.2s 0.1s;
  transition: opacity ease-out 0.2s 0.1s;
  position:relative;
}

Check out the updated fiddle here

When I utilize position absolute, the elements start overlapping each other

Answer №1

Similar questions

The void on the right side of the Safari browser

Discovering the compiled CSS file in React when using Sass: A step-by-step guide

Replicate the ctrl+/- function through coding

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

The "Sticky" directive in AngularJS causes an issue where it extends beyond the width of the parent

Vertical stability bar

What are some ways I can ensure that my personalized bootstrap navbar adjusts to different viewport sizes?

What is the solution to making flexbox align-items flex-end work in WebKit/Blink?

The functionality of Image Map is operational in Chrome and FireFox, but encountering issues in Internet Explorer

Behavior of floating footer in Wordpress across different web browsers is inconsistent

broken alignment of right-aligned Bootstrap navbar

The svh/lvh units are experiencing unexpected issues when using Chrome on an iPhone

Gradual disappearance of preloader as the page loads

What is the technique to shift the blocks to the adjoining column?

Page Transition Malfunction

Different width, same height - images arranged side by side in a responsive layout

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

Challenges with Html design

Slider with Dual Images: A Visual Comparison

CSS query: How to eliminate the extra space at the top of a webpage?