54 votes

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

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>

35voto

jhorback Points 565

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: 'absolue',
    en haut: bottomTop,
    à gauche: bottomLeft,
    largeur: bottomWidth,
    hauteur: basHauteur
});

15voto

Alex Stevens Points 507

Faire:

 div style="position:absolute"

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

et vous n'avez pas besoin de jQuery.

0voto

Fazi Points 530

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!

0voto

mike Points 21

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;

}
 

0voto

Leoj Etagram Points 1

Cela devrait faire:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X