css for displaying div tag over a page

Question

I want to display the calendar while clicking anchor tag and vice versa.I write the calendar code in div. Now I want to display the calendar over the page without sliding the this div. Now it is display as

But I want to display as next image

<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

You need to take your calendar out of document flow by giving it position: absolute . This way it won't affect the position of other sibling elements.

 $(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
}

Now get the position of the anchor and accordingly set the position of calendar:

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