5 replies [Last post]
loukmaster
loukmaster's picture
Offline
Regular
Last seen: 7 years 48 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

My HTML:

<html>
	<body>
		<div id="wrapper">
			<div id="box1">
			</div>
			<div id="box2">
			</div>
		</div>	
	</body>
</html>	

My CSS:

body {
	margin: 0;
}
 
#wrapper {
	background-color: #ddf;
	width: 100%;
	height: 1000px;
	overflow: hidden;
}
 
#box1 {
	width: 100px;
	height: 100px;
	background-color: red;
	margin: 100px 0 0 100px;
	z-index: 2;
}
 
#box2 {
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
	left: 110px;
	top: 100px;
	z-index: 1;
}

Is z-index not working because of the position absolute element? And if it is, what can I change to have it work ?

Thanks in advance,
L

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Describe the issue

What exactly do you expect to happen with that code?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

loukmaster
loukmaster's picture
Offline
Regular
Last seen: 7 years 48 weeks ago
Timezone: GMT+7
Joined: 2012-07-25
Posts: 18
Points: 28

I want the box1 to be on top

I want the box1 to be on top of the box2. But it doesn't

What can I do for that to happen ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 27 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

Make box 1 {position:

Make box 1 {position: relative;}. The z-index applies only to positioned sibling elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 5 days ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hello, Always remember that

Hello,

Always remember that when using the z index rule you also need to write a position element. It can either we relative or absolute. But unless you mention the position element it doesnt work.

Regards,
mihir.
Ps: replying from the cell phone, sorry for any grammatical errors.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

zyconn
zyconn's picture
Offline
newbie
Last seen: 7 years 45 weeks ago
Timezone: GMT+2
Joined: 2012-09-16
Posts: 10
Points: 15

loukmaster

loukmaster wrote:

<html>
	<body>
		<div id="wrapper">
			<div id="box1">
			</div>
			<div id="box2">
			</div>
		</div>	
	</body>
</html>	

If you think about it, you already posted the answer. With this code (especially with the tabulators) you see, that box1 and box2 are on the exact same level. Like if you have some sheet of papers and put two post-its next to each other. The way a document is build and the elements are nested tells the browser where it has to place the elements. You need to tell the browser that he should not behave with the boxes like normal boxes in the DOM (Document Object Model), but as mentioned from the other uses with position:relative; or position:absolute;

I hope you understand this, because English is not my native language. Wink