W3C home > Mailing lists > Public > www-style@w3.org > August 2004

RE: Transparent absolutely positioned boxes overlapping

From: David Zülke <dz@bitxtender.net>
Date: Wed, 18 Aug 2004 20:01:36 +0200
To: <Matthew.van.Eerde@hbinc.com>, <www-style@w3.org>
Message-ID: <E1BxUnN-0005sF-5Z@frink.w3.org>

You can solve this IE bug by using a 1px transparent gif or png image as
background-image.


> -----Original Message-----
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf
> Of Matthew.van.Eerde@hbinc.com
> Sent: Wednesday, August 18, 2004 6:55 PM
> To: www-style@w3.org
> Subject: RE: Transparent absolutely positioned boxes overlapping
> 
> 
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
> 
> Pyro wrote:
> >
> (http://stlouis.cardinals.mlb.com/NASApp/mlb/team/depth_chart/index.jsp?c_
> id=stl)
> > ...
> > should the hyperlinks of the underlying boxes function inside the
> space of
> > an overlapping box.
> 
> No.  You reference CSS2 9.1.1, but I think the answer is found in
> CSS2 14.2.1:
> 'background-color'
> ...
> This property sets the background color of an element, either a
> <color> value
> or the keyword 'transparent', to make the underlying colors shine
> through.
> 
> That is, transparency is a purely VISUAL phenomenon.  The background
> of the overlying box (the one with greater z-index) forms an
> obstruction to the underlying boxes.  This obstruction is
> transparent, so you can see through it, but it's still there, so you
> can't click through it.
> 
> In this respect, Firefox's interpretation is accurate, and Internet
> Explorer's is a bug.
> 
> Here's a quick test case:
> <style>
> #under
> {	position: absolute;
> 	left: 50px;
> 	top: 50px;
> 	width: 200px;
> 	height: 200px;
> 	z-index: 1;
> 
> 	background-color: #eee;
> 	border: 2px solid green;
> }
> 
> #over
> {	position: absolute;
> 	left: 25px;
> 	top: 25px;
> 	width: 250px;
> 	height: 250px;
> 	z-index: 2;
> 
> 	background-color: transparent;
> 	border: 1px solid black;
> }
> </style>
> 
> <div id="under">
> 	under<br />
> 	<a href="javascript:alert('ERROR - should not be
> clickable');">Should not be clickable</a>
> </div>
> 
> <div id="over">
> 	over
> </div>
> 
> Matthew.van.Eerde@hbinc.com                      805.964.4554 x902
> Hispanic Business Inc./HireDiversity.com         Software Engineer
> -----BEGIN PGP SIGNATURE-----
> Comment: pub key http://matthew.vaneerde.com/pgp-public-key.asc
> 
> iD8DBQFBI5f2UQQr0VWaglwRAv3uAJ0et5w/EK+HnUlUo8kwVXqNnxdGzQCg1Atw
> /wr/sJAWOp2pc/CFW1lsQvQ=
> =w9Up
> -----END PGP SIGNATURE-----
> 
Received on Wednesday, 18 August 2004 18:04:21 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:32 GMT