it-swarm.com.de

Wie wird ein div (oder ein beliebiges Element) über einer Tabellenzeile (tr) eingeblendet?

Ich möchte ein div (oder ein beliebiges Element, das funktioniert) einer Tabellenzeile (tr-Tag) überlagern, die mehr als eine Spalte enthält.

Ich habe ein paar Methoden ausprobiert, die scheinbar nicht funktionieren. Ich habe unten meinen aktuellen Code gepostet.

Ich bekomme eine Überlagerung, aber nicht direkt über der Reihe. Ich habe versucht, das Overlay-Top auf $ divBottom.css ('top') einzustellen, aber das ist immer 'auto'.

Bin ich also auf dem richtigen Weg oder gibt es einen besseren Weg, dies zu tun? Die Verwendung von jQuery ist in Ordnung, wie Sie sehen können.

Wenn ich auf dem richtigen Weg bin, wie bekomme ich das Div richtig platziert? Ist das offsetTop ein Versatz im übergeordneten Element, in der Tabelle, und ich muss etwas berechnen? Irgendwelche anderen Fallstricke, denen ich damit begegne?

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

50
slolife

Sie müssen dem Overlay-Div eine absolute Position zuweisen. Verwenden Sie auch die jQuery-Methode position () für die obere und linke Position der Zeile. Hier sind die fehlenden Teile:

 var rowPos = $ divBottom.position (); 
 bottomTop = rowPos.top; 
 bottomLeft = rowPos.left; 
__. // 
 $ divOverlay.css ({
 Position: 'absolut', 
 oben: bottomTop, 
 links: bottomLeft, 
 width: bottomWidth, 
 height: bottomHeight 
}); 
33
jhorback

Machen:

div style="position:absolute"

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

und du brauchst kein Jquery.

14
user1647224

Stellen Sie außerdem sicher, dass die Überlaufeigenschaft der äußeren Elemente (in diesem Fall der Tabelle) nicht ausgeblendet ist. Bei der ausgeblendeten Einstellung bei Überlauf wird keine Überlagerung angezeigt!

0
Fazi

Die Höhe und Breite eines Objekts einfach ermitteln. Der schwierige Teil für mich waren die Koordinaten Oben und Links für die absolute Positionierung.

Dies ist das einzige Skript, das für mich jemals zuverlässig funktioniert hat:

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

Dies sollte tun:

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