What is causing the CSS3 tabbed area to be restricted?

Experimenting with CSS tabs found at http://css-tricks.com/examples/CSSTabs/:

Sample six

.w3c { min-height: 250px; position: relative; width: 100%; }
.w3c > div { display: inline; }
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }   
.w3c > div:target > a { background: white; }    
.w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }    
.w3c > div:not(:target) > div { position: absolute }
.w3c > div:target > div { position: absolute; z-index: -1; }

While this setup creates tabbed content, I've encountered challenges in making the content within each tab interactive. Highlighting and linking seem to be restricted. Despite its concise nature, there are limitations in customization. Seeking insights from CSS experts on why manipulation seems restricted in this particular example.

Although it aligns well with my requirements, the inability to embed dynamic content within tabs is a drawback.

css

Answer №1

To regain the ability to interact with the tab's contents, simply revise the last rule by setting the z-index to 0:

.w3c > div:target > div { position: absolute; z-index: 0; }

If the z-index is negative, it will cause the tab to be obscured by elements with a zero or positive z-index, such as the page's body. This leads to the content of the tab becoming inaccessible.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The images were uploaded, but unfortunately they are not adapting to different screen sizes

I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...

htmlcssbootstrap-5

Which is better for parsing HTML - CSS or XPath selectors?

For my project, I aim to utilize lxml for parsing HTML content, as it offers support for both XPath and CSS selectors. I am currently deciding whether to bind my model properties to either CSS or XPath. I am contemplating which option would be most benefi ...

htmlcssparsingxpathcss-selectors

picking out a particular set of data from a JSON document

I have a map of Europe along with a JSON file that displays the unemployment rate for each country in the year 2011. The JSON file also includes x and y elements, allowing me to place a blue circle on top of each country on the map. My goal is to be able ...

javascriptjqueryhtmlcssjson

IOS Troubleshooting: Ineffectiveness of the Transform

So I am encountering a slight issue while trying to incorporate this code on iOS because I am not familiar with how iOS operates. On my website, I have implemented a circle that works perfectly fine on browsers and Android devices. However, when it comes t ...

ioscsstransform

Is Angular4 preloaded with bootstrap library?

I started a new angular4 project and wrote the code in app.component.html <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class ...

csstwitter-bootstrapangular

Rearrange the following <div> to appear before the previous one on medium and small devices using Bootstrap

I'm working with this div from the Bootstrap framework: <div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"> <div class="d-flex justify-content-between align-items-center"> <div class="h5 mb-0">Text text</div&g ...

htmlcss

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

cssreactjsmaterial-uistylingcss-in-js

Tips for setting the tabindex on an element that has an opacity of 0

I have created a drag and drop image upload field with a hidden input element to style the upload button according to the design. However, I am concerned about accessibility and want the upload functionality to trigger when the user presses 'Enter&apo ...

htmlcssaccessibility

How come the `table-fixed` class in Bootstrap isn't converting my table into a scrolling one?

I am having some trouble with making my table scrollable. I have around 550 rows in the table and I am using the `table-fixed` style from bootstrap, but it doesn't seem to be working as expected. Additionally, the `table-condensed` class is not regist ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to create a smooth sliding effect using CSS?

Need help with creating a transition effect within a bordered div that reveals hidden content when a button is clicked? I'm looking to have the <a> tag displayed after clicking the button, with both the button and text sliding to the left. Here& ...

javascripthtmlcss

Achieving the perfect alignment for expandable divs next to a consistently centered element using CSS

On my page, I want to ensure that the logo is always perfectly centered both horizontally and vertically when the page loads without any interactions. To achieve this, I used simple margin properties: margin: auto; position: absolute; top: 0; bottom: 0; ...

htmlcsscss-float

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

javascripthtmlcsscss-selectors

Move the button text back to its original position with animation

I have a button with text that shifts to the right by 15px when hovered over. However, when the cursor is removed, the text immediately snaps back instead of smoothly transitioning back to its original position. I tried setting the ease-in-out property but ...

htmlcss

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

I have two html files and one css file. My question is how to open the link monday.html on the same page or window in my content section. For example, when someone clicks on the Monday navigation button, I want the result to show up in the content section ...

htmlcssiframe

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

javascriptcss

The Role of Filling in a Process

I am looking to create a rectangle that fills up gradually every day, increasing by 1% each time. This is the basic concept. My main struggle is figuring out how to fill it up. I need the rectangle to increase by 1% of its width each day. So essentially, ...

javascriptjqueryhtmlcss

Issue in Opera with the $(window).load(function(){}); script

In order to display the body's main div height correctly after all content (images) have loaded, I utilized a combination of jQuery and CSS. //The CSS used is as follows body {display: none;} /* Function to calculate div block height */ function re ...

jqueryhtmlcssopera

What is the best way to ensure that two divs have aligned bottom edges?

I have a set of div containers positioned in different columns within a grid layout. I am looking for a way to identify the containers where the bottom edge is less than 50px higher than any other container, and adjust their heights so they align perfectly ...

jqueryhtmlcssgridalignment

The hierarchy of CSS in Vue components

I've developed a customized CSS framework to streamline the design process across all my internal projects. The central file is structured as shown below: @import "~normalize.css/normalize.css"; @import "_variables.scss"; @import "_mixins.scss" ...

htmlcssvue.js

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

Below is the HTML code for my website. I have managed to open the hamburger menu with the code, but I am facing an issue where it won't close. I have checked the HTML structuring using a validator and found no errors. Additionally, I have reviewed my ...

htmlcssfrontendbootstrap-5