Make the bottom links clickable which are under a link and text on z-index:3

HTML & CSS
1

There are a left link and a right link which are cyan background upper links at http://www.form.kr/test/link03.php
I like to call the two links as upper links because they are on “z-index:3”
On the contrary, there are lots of under links on the bottom.
All the under links are clickable although they are located in case just under the upper links.
So far so good because the left link, the right link, and all the under links are all clickable.

In order to display the some short text which is directly related to the cyan background left link or right link on “z-index:3”,
I made a wep page at http://www.form.kr/test/div03.php
the page is displayed as what I want.
However, the links on the bottom are not clickable when they are just under the left link or the right link on “z-index:3” which are cyan background.

I like to make them clickable although they are just under the left link or the right link on “z-index:3” which are cyan backgound.

1 Like
2

If they were sharing the same click, which one’s URL should the user be sent to?

3

At the page http://www.form.kr/test/div03.php, they are not sharing the same click, over link is going to “left.php” on the contrary, under link is going to “under leftLink.php”
When the under link is just under the over link, so the under link is hidden by the over link, the over link should be clickable like the page at http://www.form.kr/test/link03.php

4

But aren’t they already?

I’m so confused. :blush:

5

Yes, they are already at http://www.form.kr/test/link03.php when there is “link(left link)” only on the top left.
No, they aren’t, on the contrary, at http://www.form.kr/test/div03.php when there is “link and text(left link and left text)” on the top left.
Try, please, to up the vertical scroll bar of your browser.
Then you will, I hope, see the under link which is just next to the over link is not clickable

6

You added a display:inline-block element into a container that previously only contained floats. The parent container of the floated elements would therefore not recognise the content and its height would be zero and it would not obscure content underneath it (floats are removed from the flow).

Once you added a display:inline-block element into the zinLinkcontainer then the height of zinLink is increased and now sits over the whole top line. You can test yourself by adding a background color to the zinLink div.

Instead float this element left and it should return as before.

<div style="background:green;color:white;float: left;">
<a href="left.php" style="background:cyan">left link</a> left text 
</div>
7 
<div style="background:green;color:white;float: left;">
<a href="left.php" style="background:cyan">left link</a> left text 
</div>

I tried to modify with the code above at http://form.kr/test/div06.php
It’s clickable at http://form.kr/test/div06.php but the first line of the under layer is not located under the over layer.
Is there any way to make the under link to be hidden by the over layer and clickable?

8

I think you just broke the internet :slight_smile:

I’m assuming you didn’t clear the floats? clear:both

i.e.

<div style="width:100%;clear: both;">
<a href="under leftLink.php" style="color:blue;">under the link of the left Link</a> leftText
<div style="float:right" "="">rightText <a href="under rightLink.php" style="color:blue;">under link of the rightLink</a></div>
</div>

Get rid of all the width:100% from those divs as they do nothing. A div is a block element by default and will expand automatically to 100%.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.