將元素放置在另一個之上

我有一個2列的表格。當用戶點擊第2列的任何單元格時，它應該在「該單元格」上疊加一個div，該div應該左上角與單擊的單元格對齊，並進行絕對定位。將元素放置在另一個之上

我們該怎麼做。這是我做過迄今（不工作密碼）

var $divOverlay = $('#divOverlay'); 
     var bottomWidth = $(this).css('width'); 
     var bottomHeight = $(this).css('height'); 
     var rowPos = $(this).position(); 
     bottomTop = rowPos.top; 
     bottomLeft = rowPos.left; 
     $divOverlay.css({ 
      position: 'absolute', 
      top: bottomTop, 
      right: '0px', 
      width: '80%', 
      height: '500px' 
     });

小提琴：http://jsfiddle.net/v4dXn/14/

來源

2013-07-16 CuriousDev

爲什麼不只是改變單元格的背景顏色？ – adeneo

只需將「left：bottomLeft」添加到屬性即可。 http://jsfiddle.net/v4dXn/15/ –

覆蓋從第1列出現。我的任務是使覆蓋出現在第2列單元 – CuriousDev

這將是我的做法。注意班級最初是如何擁有我們需要的位置和偏移量的，並且我們只是根據需要將它附加到元素上。

$('td').on('click', function(){ 
    var $this = $(this), 
    $divOverlay = $('#divOverlay'); 

    $divOverlay.css({ 
     height:$this.height(), 
     width:$this.outerWidth() 
    }).appendTo($this).show(); 

});

Fiddle

注 -

你只需要outerWidth()如果你使用的細胞，而不是硬寬度值填充，如果你正在使用某種類型的響應式設計。

來源

2013-07-16 19:42:36 Ohgodwhy

 var $divOverlay = $('#divOverlay'); 
     var bottomWidth = $('tr').css('width'); //Get the width of the tr 
     var bottomHeight = $('tr').css('height'); //Get the height of the tr 
     var rowPos = $(this).position(); 
     bottomTop = rowPos.top; 
     bottomLeft = rowPos.left; 
     $divOverlay.css({ 
      position: 'absolute', 
      top: bottomTop,    
      width: bottomWidth, //assign here 
      height: bottomHeight //assign here 
     }); 
     .... 
     ....

Update fiddle

來源

2013-07-16 19:44:22 Praveen

覆蓋從第1列出現。我的任務是使覆蓋出現在第2列單元 – CuriousDev

我相信，在這種情況下，你應該使用.offset代替.position，因爲元素不共享相同的父。 http://api.jquery.com/offset/

另外補充：left : bottomLeft

來源

2013-07-16 19:45:53

將元素放置在另一個之上

回答

相關問題