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>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie das overlay-div eine absolute position. Auch über die position() jQuery-Methode für den oberen und linken Positionen der Reihe - hier sind die fehlenden Stücke:
Machen:
ist und Sie brauchen nicht jquery.
td { position: relative; display: block;} .overlay {position: absolute; white-space: nowrap; z-index: 1000;}
aufgetragen und anschließend die Klasse auf die erste Zelle:<tr><td class="overlay">long block of text</td><td>B</td></tr>
Stellen Sie außerdem sicher, dass die äußeren Elemente (in diesem Fall die Tabelle) overflow-Eigenschaft ist nicht auf hidden gesetzt. Mit der versteckten Einstellung auf überlauf, ohne overlay angezeigt!
Immer die Höhe und Breite eines Objekts einfach. Der schwierige Teil für mich war die Top und Left-Koordinaten für die absolute Positionierung.
Dies ist das einzige Skript, dass je gearbeitet hat zuverlässig für mich:
Dies tun sollte: