javascript - 用于在页面上显示 div 标签的 css

Question

我想在单击 anchor 标记时显示日历，反之亦然。我在 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>