Comment superposer un div (ou un élément) sur une ligne de table (tr)?
Je voudrais superposer un div (ou tout élément qui fonctionnera) sur une ligne de table (balise tr) qui a plus d'une colonne.
J'ai essayé quelques méthodes qui ne fonctionnent pas. J'ai posté mon code actuel ci-dessous.
J'obtiens une superposition, mais pas directement sur la ligne. J'ai essayé de définir le dessus de superposition à $ divBottom.css('top'), mais qui est toujours en mode 'auto'.
Donc, suis-je sur la bonne voie, ou est-il une meilleure façon de le faire? Utiliser jQuery est bien comme vous pouvez le voir.
Si je suis sur la bonne voie, Comment puis-je placer le div correctement? Le offsetTop est-il un décalage dans l'élément contenant, la table, et j'ai besoin de faire des calculs? D'autres pièges que je rencontrerai avec ça?
$(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);
});
});#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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Overlay Tests</title>
</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>
</body>
</html>5 réponses
Vous devez faire en sorte que la superposition div ait une position absolue. Utilisez également la méthode jQuery position () pour les positions supérieure et gauche de la ligne-Voici les pièces manquantes:
var rowPos = $divBottom.position();
bottomTop = rowPos.top;
bottomLeft = rowPos.left;
//
$divOverlay.css({
position: 'absolute',
top: bottomTop,
left: bottomLeft,
width: bottomWidth,
height: bottomHeight
});
Assurez-vous également que la propriété de débordement des éléments externes (dans ce cas, la table) n'est pas définie sur hidden. Avec le paramètre caché sur overflow, aucune superposition ne sera affichée!
Obtenir la hauteur et la largeur d'un objet simple. La partie difficile pour moi était les coordonnées supérieures et gauches pour un positionnement absolu.
C'est le seul script qui ait jamais fonctionné de manière fiable pour moi:
function posY(ctl)
{
var pos = ctl.offsetHeight;
while(ctl != null){
pos += ctl.offsetTop;
ctl = ctl.offsetParent;
}
return pos;
}
function posX(ctl)
{
var pos = 0;
while(ctl != null){
pos += ctl.offsetLeft;
ctl = ctl.offsetParent;
}
return pos;
}
Cela devrait faire:
var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;