Laying a Div element on top of other html elements

RandyTommy
RandyTommy used Ask the Experts™
on
I had previously been showing an html table on top of other html tables by setting it's "position" attribute to "absolute".  But I can no longer use "absolute" due to other conficts.

What other technique can I use to get the "overlay" effect?  Everything I've tried only bumps the tables together side-to-side (or top-to-bottom).

(I need an answer limited to html, javascript, and css, with Explorer is the target browser.)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
In CSS you can use the z-index property to 'layer' things.

<div style='position:absolute;background-color:#FF0000;height:100px;width:100px;left:0;top:0;z-index:1;'> </div>
<div style='position:absolute;background-color:#00FF00;height:10px;width:10px;left:45px;top:45px;z-index:2;'> </div>
<div style='position:absolute;background-color:#0000FF;height:2px;width:2px;left:49px;top:49px;z-index:3;'> </div>

Author

Commented:
Interesting, Vampireofdarkness.   But like I said, I can't use "absolute" because of other conflicts.

I tried your z-index concelpt without "aboslute", but the elements were still "butting heards".
Top Expert 2015
Commented:
Position absolute can be made to work. When the tables are placed inside a parent element whose position is set to something other than position:static, the tables can be placed one overlapping the other. In this scenario, positions are set absolutely off of the parent container. Can you could make this work for you?

In the following example the parent container (div id="wrapper") is centered on the browser window so it floats. Its position is set to relative. The tables within are positioned absolute off of the parent containers edges. When the parent container floats because the window is re-sized, the tables float with it despite the absolute positioning.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type="text/css">
body {margin:0 auto;padding:0}
#wrapper {margin:0 auto; width:600px;height:400px;background-color:#eee;position:relative}
table {border: solid 1px #00f;position:absolute}
table td {border:solid 1px #f00}
#table_1 {left:50px;top:40px;background-color:#def}
#table_2 {left:100px;top:80px;background-color:#fed}
</style>
</head>
<body>
<div id="wrapper">
<table id="table_1">
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
</table>

<table id="table_2">
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
<tr>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
    <td>Some cell data</td>
</tr>
</table>
</div>
</body>
</html>

Open in new window


Here's an alternative:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<title>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_27039542.html</title>
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

jQuery(document).ready( function() {

  $("input[type=button]").click( function() {
    $("#table-wrapper table").toggle();
  });

});

</script>

<style type="text/css">
table { border: 1px solid red; }
#one { background-color: beige; }
#two { background-color: silver; display: none; }
</style>

</head> 
<body> 

<div id="table-wrapper">

<table id="one">
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>i</td><td>j</td><td>k</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
<tr><td colspan="3"><input type="button" value="toggle"></td></tr>
</table>

<table id="two">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
<tr><td colspan="3"><input type="button" value="toggle"></td></tr>
</table>

</div>

</body> 
</html>

Open in new window

Author

Commented:
1.   Vampireofdarkness, you lead to my finding my own answer, which was to use "relative" and negative top/left values.  And telling about z-index is useful elsewhere.

2.   TommyBoy, Great example.  It almost worked, except mixing relative with absolute caused the percent of overlap to change when resized.

3.   Proculopsis, I don't understand how your 'alternative' relates to the question, since it doesn't show partially-overlapping objects.  (My bad?)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial