Move a box on the z-index:1 to the center of the browser

HTML & CSS
1

move a box on the z-index:1 to the center of the browser with links which are on the bottom layer and out of the lightBlue box are clickable.

I have a webPage at http://dot.kr/x-test/center4.php
It has 3 div boxes, i.e. 2 lightGreen boxes and 1 pink box on the bottom layer.
Adding to the 3 boxes and over the bottom layer, it has a lightBlue box on z-index:1.
A clickable link is in the lightGreen box each.
I like to move the lightBlue box to the center of the browser horizontally with covering the pink box and with keeping the two links in the two lightGreen boxes clickable.
How can I move the lightBlue box to the center of the browser horizontally with covering the pink box (The pink box or at least some part of it should be hidden by the lightBlue box.)
and with keeping the two links in the two lightGreen boxes clickable(It should NOT be non-clickable.)?

(The text in the lightGreen box is dynamic,
If the width of the lightBlue box is fixed, I can move the box to the center of the browser. )

2

HI,

That’s a bit of a weird setup especially with the fixed positioning but you can move things around like this.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>center4</title>
<style>
* {
	margin:0;
	padding:0;
}
.mid {
	position:fixed;
	z-index:1;
	width:100%;
	top:0;
	text-align:center;
}
.mid div {
	background:lightBlue;
	display:inline-block;
}
.left {
	background:lightGreen;
	float:left;
	position:relative;
	z-index:2;
}
.right {
	background:lightGreen;
	float:right;
	position:relative;
	z-index:2;
}
.link {
	background:pink
}
.content {
	text-align:center;
}
</style>
</head>
<body>
<div class="mid">
		<div>wanna-be horizontally centered and wanna cover the pink box with z-index </div>
</div>
<div class="left"><a href="">clickable link </a> </div>
<div class="right"> <a href="">clickable link</a> </div>
<div class="content"> <a class="link" href="#">wanna-be non-clickable link by being covered with the lightBlue box </a> </div>
</body>
</html>

Just remember that z-index only applies to positioned elements so if you want to raise a stacking level of a static element then add position:relative and then the z-index can be applied and take effect.

3