While some may view this method as unconventional, it actually gets the job done without the need for Javascript or complex calculations, so I decided to share it here.
The visual outcome in the example may appear a bit peculiar due to the tabs being semi-opaque, allowing you to see how they interact (or don't) and overlap each other.
The technique involves stacking all elements on top of one another without utilizing absolute positioning, enabling the parent element to automatically adjust its height accordingly. To achieve this effect, I followed these steps:
- Displayed all tabs as inline-block elements to form a linear layout.
- Prevented the line from wrapping by applying
white-space: nowrap to the parent element. To ensure proper text rendering inside the tabs, I reset the white space with white-space: normal.
- Assigned a negative right margin of -100% to each block, causing them to behave as if they have zero width in relation to the next block's position. This results in subsequent blocks starting at the same left position.
- Included specific styling adjustments such as setting the font size to 0 on the parent element to eliminate whitespace issues. Alternatively, any extra spaces between tab divs in the HTML code can also address this concern.
I opted to include <p> tags within each tab to maintain consistent behavior across all tabs and avoid comments like "Hey! Tab 2 seems higher!"
The necessary CSS for this approach is relatively minimal. I segmented it with comments for easy removal of unnecessary parts.
Regarding the naming convention, I deliberately retained the identifiers rel and abs. Renaming them would have required considerable effort, demonstrating that using descriptive names related to function (tab-container, tab-sheet) is preferable over specifying implementation details. ;-)
/* Basic alignment settings */
.rel{
white-space: nowrap;
}
.abs{
vertical-align: top;
white-space: normal;
display: inline-block;
width: 100%;
margin-right: -100%;
}
/* Resolve white-space issues that could affect tab positioning.
Can be mitigated by removing excess whitespaces in the HTML content, rendering this CSS redundant. */
.rel{
font-size: 0;
}
.abs{
font-size: 1rem;
}
/* Additional styles for demo purposes */
.rel {
box-sizing: border-box;
border: 1px solid red;
}
.abs {
opacity: 0.5;
background: #eee;
box-sizing: border-box;
border: 1px solid blue;
}
.abs:nth-child(1) { color: red; }
.abs:nth-child(2) { color: grey; }
.abs:nth-child(4) { color: green; }
.abs:nth-child(5) { color: blue; font-weight: bold; }
<div class="rel">
<div class="abs intro"><p>First tab, positioned at the bottom and nearly invisible</p></div>
<div class="abs"><p>2</p></div>
<div class="abs"><p>3</p></div>
<div class="abs about-us">
<p>
When it comes to web design services, we are a top-rated player with remarkable capabilities that greatly benefit businesses. Our extensive experience and high-level skills make us a preferred choice for affordable web design solutions. We offer various budget-friendly packages tailored to your needs and preferences, making it convenient for many businesses to work with us for customized website designs. Our large customer base recognizes us as a leading web design company for small businesses.
WordPress remains a popular platform for diverse web development projects, offering numerous advantages to designers and businesses. As a WordPress website development company, we provide comprehensive WordPress services backed by accomplished and talented web designers. Feel free to inquire about our competitive WordPress website design pricing. Benefit from our exceptional expertise in WordPress development to create stunning websites.
In the realm of Ecommerce Web Design Services, we excel in designing responsive websites that perform exceptionally across various interfaces. Each project showcases our creativity and commitment to delivering top-notch designs. Beyond web and ecommerce service offerings, we specialize in several other areas to serve clients effectively. Our expertise in business catalyst hosting sets us apart as a top Adobe Business Catalyst expert.
</p>
</div>
<div class="abs"><p>This final paragraph appears on top consciously...<p></div>
</div>
The proof is evident in the footer!