Je voudrais superposer un div (ou tout élément qui va marcher) sur une ligne de tableau (balise tr) qui arrive à avoir plus d'une colonne.
J'ai essayé quelques méthodes qui ne fonctionnent pas. J'ai posté mon code ci-dessous.
Je ne reçois pas de superposition, mais pas directement sur la ligne. J'ai essayé le réglage du haut de la superposition de $divBottom.css('top'), mais qui est toujours en mode 'auto'.
Alors, suis-je sur la bonne voie, ou est-il une meilleure façon de le faire? En utilisant jQuery est très bien comme vous pouvez le voir.
Si je suis sur la bonne voie, comment puis-je obtenir la div placé correctement? Est le offsetTop un décalage dans l'élément conteneur, la table, et j'ai besoin de faire quelques calculs? Toutes les autres astuces je vais courir avec cela?
<html>
<head>
<title>Overlay Tests</title>
<style>
#rowBottom { outline:red solid 2px }
#divBottom { margin:1em; font-size:xx-large; position:relative; }
#divOverlay { background-color:Silver; text-align:center; position:absolute; z-index:10000; opacity:0.5; }
</style>
</head>
<body>
<p align="center"><a id="lnkDoIt" href="#">Do it!</a></p>
<table width="100%" border="0" cellpadding="10" cellspacing="3" style="position:relative">
<tr>
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
</tr>
<tr id="rowBottom">
<td><div id="divBottom"><p align="center">This is the bottom text</p></div></td>
</tr>
<tr>
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></td>
</tr>
</table>
<div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div>
<script src="../includes/javascript/jquery/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#lnkDoIt').click(function() {
var $divBottom = $('#rowBottom');
var $divOverlay = $('#divOverlay');
var bottomTop = $divBottom.attr('offsetTop');
var bottomLeft = $divBottom.attr('offsetLeft');
var bottomWidth = $divBottom.css('width');
var bottomHeight = $divBottom.css('height');
$divOverlay.css('top', bottomTop);
$divOverlay.css('left', bottomLeft);
$divOverlay.css('width', bottomWidth);
$divOverlay.css('height', bottomHeight);
$('#info').text('Top: ' + bottomTop + ' Left: ' + bottomLeft);
});
});
</script>
</body>
</html>