In CSS and HTML, links located behind a divider are unable to be clicked

I am currently facing an issue with my code where the anchors on the left and right (behind the middle anchor) are not clickable. I have attempted to use z-index to bring only the anchors in front while leaving the divider in the back so that the middle anchor remains clickable. To better understand my problem, I suggest creating a quick example.html file, pasting the code in, and trying to click all 3 anchors (even though visually it looks like more due to line breaks).

If you want to check out the code in action, here is the JSFiddle link: http://jsfiddle.net/a9C3R/1/

Here is the snippet of code causing the issue:

<div style='position:fixed; top:0%; left:0%; height:100%; width:100%;'>
<div style='width:850px; margin-left:auto; margin-right:auto; border-left-style:solid; border-left-color:#333; border-left-width:thin; border-right-style:solid; border-right-color:#333; border-right-width:thin;padding-left:20px; padding-right:20px; padding-top:60px; padding-bottom:60px; height:100%; overflow:visible; background-color:#FFF;'>
<div>
<table width='100%' height='100%' style='width:100%; height:100%;'>
<td height='50%' width='120px' style='vertical-align:middle; height:50%; width:120px;'>
<div><a href=''>try to click me</a></div>
</td>
<td width='90%' style='vertical-align:middle; width:90%;'></td>
<td height='50%' width='120px' style='vertical-align:middle; height:50%; width:120px;'>
<div><a href=''>try to click me</a></div>
</td>
</table>
</div>
</div>
</div>

<div style='position:absolute; top:0%; left:0%; height:100%; width:100%;'>
<div style='width:610px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; padding-top:60px; padding-bottom:60px; height:100%; overflow:visible;'>
<center>
<a href=''><font size="+1">try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br>try<br>to<br>click<br>me<br><br><br><br><br></font></a>
</center>
</div>
</div>
csshtmlz-indexanchor

Answer №1

If you want to see the changes, make sure to review the code provided in this link: http://jsfiddle.net/b5D9P/6/ I included z-index: 2;position: absolute; for the third div and 

style="position: relative;z-index: 2;"
for the span right after the <center> tag.

Answer №2

The situation you are facing is due to your absolute <div> completely overlapping your fixed <div>. Unfortunately, using z-index to bring a child of your fixed <div> above your absolute <div> is not possible. One solution could be to create separate fixed <div>s for the left and right links instead.

Answer №3

<div style='position:absolute; top:0%; left:0%; height:100%; width:100%;'>

The issue lies with this code snippet, as it is overlapping the other two links. Nevertheless, your understanding of HTML seems to be lacking.

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

Troubleshooting issues with lxml Xpath functionality

Struggling to extract information from a webpage code provided below. While I managed to retrieve the users using xpath, I am facing difficulty in obtaining their scores. Any suggestions on what might be going wrong here? import requests from lxml impor ...

pythonhtmlxpathweb-scrapinglxml

Is it possible to merge CSS transitions and animations?

Hi there, I'm encountering an issue when trying to combine CSS transitions and animations. It seems that when I add a transition, it cancels out the animation that is working. Does anyone have any insights on how to successfully merge them together? ...

cssanimationcss-animations

Acquire the text within an anchor tag using JavaScript

Is it possible to invoke a search for all links on my Wordpress blog? I'm not sure if my idea is correct. Currently, I am using an Ajax call for another search on this site. How can I extract the text from a hyperlink HTML tag? For example: <a href ...

phpjavascripthtmlwordpress

What could be causing the inaccuracies in the way my Array data is being transferred to my MySQL

Recently, I had the opportunity to learn how to convert a JSON file into an array with the help of a generous stackoverflow user. The process was successful, but when I attempted to input this data into my database, I encountered unexpected results. Array ...

phphtmlmysqljsondatabase

Move the option from one box to another in jQuery and retain its value

Hey guys, I need some assistance with a jQuery function. The first set of boxes works perfectly with the left and right buttons, but the second set is not functioning properly and doesn't display its price value. I want to fix it so that when I click ...

javascriptjqueryhtml

What is the method for implementing right/left text ellipses on flexed buttons that span the entire viewport width using CSS?

I currently have the following code: .viewport { width: 300px; } .container { --color-dark: rgb(40, 40, 40); --color-light: rgb(255, 255, 255); --color-base-background: rgb(255, 255, 255); ... <div class="viewport"> <di ...

css

Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows: <blockquote> <p><img src="..."/> A paragraph...</p> <p>...</p> ... </blockquote> Here is the CSS u ...

javascripthtmlcssiossafari

Disabling an image is similar to deactivating a button

document.getElementById("buttonName").disabled = true; I have successfully disabled a button using the code above. However, I am now facing a challenge with using pictures as buttons that have an onClick function. Is there a way to disable the onClick fun ...

htmlimagebuttonjavascript

Dealing with 'this' while using an addEventListener

I need to trigger the function handleRangeUpdate in a way that it responds to the event calling it and decides whether to run console.log(this.value). The problem arises when I pass e into handleRangeUpdate using addEventListener, causing the value of thi ...

javascripthtmlthisaddeventlistener

Trigger a click event on a dynamically loaded button

Here's a unique twist to the usual discussions on this topic. I have a dynamically loaded button in my HTML, and I've saved the selector for it. Later on in my code, I need to trigger a click event on this button programmatically. The typical $(& ...

javascriptjqueryhtmldom

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

javascriptjqueryhtml

The .ogv video file type does not seem to be functioning properly within the HTML5 video tag on Firefox

Hello, I'm encountering some issues with playing the .ogv file in Firefox. If you could take a look at the link , that would be greatly appreciated. I believe my HTML5 video tag syntax is correct as it's working fine on other browsers. Thank you ...

htmlwordpressvideo

Is there a way to execute this process twice without duplicating the code and manually adjusting the variables?

I'm looking to modify this code so that it can be used for multiple calendars simultaneously. For example, I want something similar to the following: Here is what I currently have: This is my JavaScript code: var Calendar = { start: function () ...

javascripthtmlcsscalendar

The image will remain static and will not alternate between hidden and visible states

I am facing a challenge trying to toggle an image between 'hidden' and 'show' My approach is influenced by the post on How to create a hidden <img> in JavaScript? I have implemented two different buttons, one using html and the ...

javascripthtmlimageshowhidden

How to Correctly Align Links in Bootstrap Navbar

I am currently utilizing Bootstrap 5 and I am looking to perfectly center some links within the navigation bar. <header> <nav class="navbar navbar-expand-lg py-5"> <div class="container"> ...

htmlbootstrap-5

Unresponsive CSS styles on a specific DIV element

Here is the HTML code I am currently working with: <body> <section id="info"> <div class="status"> ... I have been attempting to apply styles to the div with a class of 'status' using my CSS file linke ...

htmlcss

JavaScript: Implementing dynamic image loading with JavaScript

In a tutorial, I came across this piece of JavaScript code focusing on loading an image to a canvas and performing manipulations afterward. To enhance clarity, I have removed irrelevant portions of the code. 1) I am puzzled as to why the line containing t ...

javascripthtmlimage

Create a CSS border that resembles the one used in Google's signup form

lies a curious inquiry: what unique border style is in play here? It rests slightly raised against the backdrop, creating an intriguing visual effect. After combing through various sources online, the answer still eludes me. Perhaps turning to Google' ...

css

Central peak in an expansive sphere

I'm attempting to mimic the design shown in this visual representation: While I am familiar with how to generate a semi-circle using CSS, my goal is to only create the top central segment of a larger circle. Specifically, I am seeking the CSS code n ...

css

Ways to tally HTML elements using VBA

Currently, I am delving into the world of creating a web scraping tool using VBA to extract event details and store them in an Excel sheet. Within this endeavor, I am faced with deciphering HTML code snippets that resemble the following: <div class="a ...

htmlexcelvbaweb-scraping