RandyTommy
asked on
Laying a Div element on top of other html elements
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.)
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.)
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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>
ASKER
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?)
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?)
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
I tried your z-index concelpt without "aboslute", but the elements were still "butting heards".