Connection problem

HTML & CSS
1

I want click the link “go home” in the bottom of the box leftContents at the page of http://dot.kr/joon/218color/menu/index.php.
But I can’t click the link “go home” because centerBox(z-index1) covers the leftContents box and the rightContents box.
if I click “(x)” in the centerBox, the centerBox will disappears. Then I can click the link “go home”.

Can I make the link clickable before the centerBox is disappeared?

How can I make the centerBox covers only the centerBox which is inside of the gray border line
instead it(z-index1) covers not only centerBox but also leftContents box and the rightContents box?
(I want to make it the centerBox does not cover outside of the centerBox which is inside of the gray border line.)

2

The link to the page that you posted does not load in my browsers. The error message says “Page not available”.

3

Hi,

Your over-use of non-semantic classnames make this a minefield to debug and little better than the font-tags of old with inline rules. :slight_smile: It just makes it so hard to read the html and then adjust the CSS because there is no structure; just presentational classes that give no hint to what,where,why and how.

Assuming this class is unique to that left column then you can raise the z-index to keep it on top.


.flL{position:relative;z-index:2;}
4

connection problem-> link problem

As I raised the z-index to keep it on top at http://dot.kr/joon/221cover/menu/.
The centerBox in yellow is hidden by the leftContents box.

I don’t want that the centerBox in yellow is hidden by the leftContents box.
Instead, I want that the leftContents box is hidden by the centerBox like the page at http://dot.kr/joon/220problem/menu/
and the link “go home” is clickable.
If the link “go home” is hidden by the centerBox in yellow, it’s okay that the link “go home” is not clickable.
But if the link “go home” is not hidden by the centerBox in yellow because it’s outside the yellow box, It should be clickable.
Thank you very much.

5

Hi,

I can’t actually see a scenario where your overlapping elements will be of any use in a real world site unless it was for overlapping images or something similar but for content it is the wrong approach. You can’t effectively have both elements on top and the way you have placed those elements mean that either one or the other will be on top. I don’t understand why you haven’t kept them in separate columns.

However notwithstanding the above you can raise the z-index of the link itself so it is clickable if you remove the rule I gave earlier and then apply this new rule.


.flL a{position:relative;z-index:2;}

However this assumes that you will not apply position:relative and z-index to either of the parents of those two columns otherwise the stacking becomes atomic and inescapable (i.e. children obey the parents z-index with respect to other elements outside that context ). It is not something that I would rely on in a real world site where code changes over time to accommodate new elements and stacking context are altered.

6

http://dot.kr/joon/223win/menu/ has the code above.
It’s okay that the link “go home1” is seen and clickable when the yellowBox does not cover the link “go home1”.
It’s not okay that the link “go home2” is seen and clickable when the yellowBox covers the link “go home2”.
(However, the link “go home2” is seen and clickable at http://dot.kr/joon/223win/menu/.)
To speak the point at the moment,
I am saying that I want z-index1 covers only inside of the yellow box and z-index1 does not cover outside of the yellow box.

7

Hi,

Unfortunately webkit treats position:fixed as atomic in that it always creates a z-index of zero for the parent rather than auto. This means that all children live within the z-index of the main parent.

In your example your position fixed element covers the whole screen so it can either be on top of everything or under everything. It can’t exist in both planes. For firefox and IE you could simply remove the z-index from the parent and apply it to the yellow box instead but as I mentioned this won’t work in webkit and as webkit is the major browser these days its not an approach you can take.

The only method you could use is to position the middle box using a width and a height and margin:auto along with top, right left and bottom co-ordinates which will center the element but at the same time will not cover the whole screen as in your example. You cannot have the auto height and width format you have now.


.fixed {
	position:fixed;
	z-index:3;
	width:50%;
	height:50%;
	margin:auto;
	background:red;
	left:0;
	top:0;
	right:0;
	bottom:0;
}

Here’s the basic example that shows the stacking context working in this situation (just move the window to cover the link).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
	margin:0;
	padding:0;
	height:100%;
}
.fixed {
	position:fixed;
	z-index:3;
	width:50%;
	height:50%;
	margin:auto;
	background:red;
	left:0;
	top:0;
	right:0;
	bottom:0;
}
.test2 {
	margin:auto;
	width:300px;
	height:300px;
	background:green;
	padding:100px 0 0;
}
a:hover {
	background:yellow
}
</style>
</head>

<body>
<div class="fixed">
		<div class="test">test</div>
</div>
<div class="test2"> <a href="#">test2</a> </div>
</body>
</html>

I’m afraid there is no other solution that I can see because of the webkit bug (actually its not a bug as they did this on purpose).