用于在页面上显示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来取消文档流程中的日历。这样它就不会影响其他兄弟元素的位置。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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");
    });
});