Wie überlagert ein div (oder ein beliebiges element) über eine Tabellenzeile (tr)?

Ich würde gerne ein div-overlay (oder jedes element, das klappt) über eine Tabellenzeile (tr-tag) geschieht, um mehr als eine Spalte.

Ich habe versucht ein paar Methoden, die scheinen nicht zu funktionieren. Ich habe meine aktuelle code unten.

Bekomme ich ein overlay, aber nicht direkt über nur die Zeile. Ich habe versucht, die overlay-top zu $divBottom.css('top'), aber das ist immer auf 'auto'.

So, ich bin auf dem richtigen Weg, oder gibt es einen besseren Weg, es zu tun? Nutzung von jQuery in Ordnung ist, wie Sie sehen können.

Wenn ich bin auf dem richtigen Weg, wie bekomme ich das div korrekt platziert? Ist die offsetTop ein offset im enthaltenden element der Tabelle, und ich müssen noch etwas Mathe? Alle anderen Hinweise werde ich in Lauf mit, dass?

JS:

$(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);
  });
});

CSS:

#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; }

HTML:

<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>

InformationsquelleAutor slolife | 2010-06-17
Schreibe einen Kommentar