用於在頁面上顯示div標籤的css

Question

我想在點擊錨標籤時顯示日曆，反之亦然。我在div中編寫日曆代碼。現在我想在頁面上顯示日曆而不滑動這個div。 現在是顯示爲

但我想顯示爲下一個圖像

<a class="aastext">Payroll Calender</a> 
<div id='cal' class='cal'></div> 
<table> 
    <!-- table code --> 
</table> 

.cal, .pass1{ 
    display: none; 
    width : 50px; 
    height: 50px; 
    background-color: blue; 
} 

$(document).ready(function(){ 
    $(".aastext").click(function(){ 
     $(".cal").slideToggle("slow"); 
    }); 
}); 

Answer 1

你需要把你的日曆出來的文件通過給它流動position: absolute。這樣它不會影響其他兄弟元素的位置。

$(document).ready(function() 
 
{ 
 
    $(".aastext").click(function() 
 
    { 
 
     $(".cal").slideToggle("slow"); 
 
    }); 
 
});

.cal 
 
{ 
 
    font-size: 10px; 
 
    display:none; 
 
    width :50px; 
 
    height:50px; 
 
    background-color:blue; 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a class="aastext">Payroll Calender</a> 
 
<div id='cal' class='cal'>calendar</div> 
 
<table> 
 
    <tr> 
 
     <td>table</td> 
 
    </tr> 
 
</table>

Answer 2

添加position: absolute您.cal

Answer 3

First make your calendar position absolute: 

.cal, .pass1{ 
    display: none; 
    width : 50px; 
    height: 50px; 
    background-color: blue; 
    position : absolute; 
    z-index:999 
} 

現在得到的錨的位置，並相應地設置日曆的位置：

$(document).ready(function(){ 
    $(".aastext").click(function(){ 
     var anchorOffset=$(this).offset(); 
     var anchorHt=$(this).height(); 
     $(".cal").css("top",(anchorOffset.top+anchorHt)+"px"); 
     $(".cal").css("left",anchorOffset.left+"px"); 
     $(".cal").slideToggle("slow"); 
    }); 
});