用于在页面上显示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"); 
    }); 
});