web-dev-qa-db-fra.com

Comment superposer un div (ou un élément) sur une ligne du tableau (tr)?

J'aimerais superposer un div (ou tout élément qui fonctionnera) sur une ligne de tableau (balise tr) qui contient plus d'une colonne.

J'ai essayé quelques méthodes qui ne semblent pas fonctionner. J'ai posté mon code actuel ci-dessous.

Je reçois une superposition, mais pas directement sur la rangée. J'ai essayé de définir la superposition supérieure sur $ divBottom.css ('top'), mais c'est toujours 'auto'.

Alors, suis-je sur la bonne voie ou y a-t-il une meilleure façon de le faire? Comme vous pouvez le constater, utiliser jQuery est satisfaisant.

Si je suis sur la bonne voie, comment puis-je placer la div correctement? Est-ce que offsetTop est un offset dans l'élément conteneur, la table, et je dois faire quelques calculs? Y a-t-il 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>

javascriptjqueryhtmlcssoverlay
50
slolife

Vous devez donner à la couche superposée une position absolue. Utilisez également la méthode position () jQuery pour les positions supérieure et inférieure 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 
});
33
jhorback

Faire:

div style="position:absolute"

td style="position:relative;display:block"

et vous n'avez pas besoin de jQuery.

14
user1647224

Assurez-vous également que la propriété de débordement des éléments extérieurs (dans ce cas la table) n'est pas définie sur masqué. Avec le paramètre masqué de débordement, aucune superposition ne sera affichée!

0
Fazi

Obtenir la hauteur et la largeur d'un objet simple. La partie la plus difficile pour moi a été les coordonnées Haut et Gauche pour un positionnement absolu.

C'est le seul script qui a 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;

}
0
mike

Cela devrait faire:

var bottomTop = $divBottom.offset().top;
var bottomLeft = $divBottom.offset().left;
0
Leoj Etagram