Asp.net 在文本框的正下方显示日历

我设计了一个下拉日历，但是如果我点击图片显示下拉日历，我看不到文本框下面的内容。如何在文本框下方显示此日历：

<table width=100%>
  <tr align=center>
    <td align=center>
      <asp:Panel ID="Panel2" runat="server" GroupingText="Suche" >
        <table width=100%>
          <tr align=center>
            <td align=center>
              <asp:Label ID="Label4" runat="server" Text="Von :"></asp:Label>
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
              <img id="Calimg1" src="Images/cal.jpg" onclick="selectdate()" />
              <div id="calblock1" class=calander >
                <asp:Calendar OnSelectionChanged="Calendar1_SelectionChanged"
                              ID="Calendar1" runat="server" BackColor="#FFFFCC" 
                              BorderColor="#FFCC66" BorderWidth="1px"
                              DayNameFormat="Shortest" Font-Names="Verdana"
                              Font-Size="8pt" ForeColor="#663399" Height="200px" 
                              ShowGridLines="True" Width="220px">
                  <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True"
                                  Height="1px" />
                  <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                  <OtherMonthDayStyle ForeColor="#CC9966" />
                  <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                  <SelectorStyle BackColor="#FFCC66" />
                  <TitleStyle BackColor="#990000" Font-Bold="True"
                              Font-Size="9pt" ForeColor="#FFFFCC" />
                  <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                </asp:Calendar>
              </div>
              <asp:RequiredFieldValidator ID="RequiredFieldValidator1"
                                          runat="server" 
                                          ControlToValidate="TextBox1"
                                          ErrorMessage="*" ForeColor="Red">
              </asp:RequiredFieldValidator>
            </td>
          </tr>
......

我使用的JavaScript：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Calimg1').click(function () {
            if (isAnyVisible()) return false;
            $('#calblock1').slideToggle("slow");
        });

        $('#Img1').click(function () {
            if (isAnyVisible()) return false;
            $('#Div2').slideToggle("slow");
        });
    });

    function isAnyVisible() {
        if ($('#Calimg1').is(':visible') || $('#Img1').is(':visible')) {
            return false;
        }
        return true;
    }

$（文档）.ready（函数（）{
$（'#Calimg1'）。单击（函数（）{
if（isAnyVisible（））返回false；
$（'calblock1'）。滑动切换（“慢速”）；
});
$（'#Img1'）。单击（函数（）{
if（isAnyVisible（））返回false；
$（'#Div2'）。滑动切换（“慢速”）；
});
});
函数isAnyVisible（）{
如果（$（'#Calimg1'）。是（':visible'）|$（'#Img1'）。是（':visible'））{
返回false；
}
返回true；
}

您已指定

位置为
绝对位置，这是正确的轨迹。然而，你遗漏了一些东西

首先，绝对元素的父元素应该具有
位置：relative
。如果没有该相对父级，当您指定
顶部
和
左侧
时，它将相对于整个文档。如果您使用的坐标是相对于容器的，那么使用起来就容易多了

其次，嵌套表很可怕。使用div，删除一些容器。CSS定位、浮动、边距和填充将实现相同的结果

文件编制


CSS
位置
在MDN处-
一篇关于CSS定位的列表文章-
停止使用表格进行布局@堆栈溢出-
您已指定
位置为
绝对位置，这是正确的轨迹。然而，你遗漏了一些东西

首先，绝对元素的父元素应该具有
位置：relative
。如果没有该相对父级，当您指定
顶部
和
左侧
时，它将相对于整个文档。如果您使用的坐标是相对于容器的，那么使用起来就容易多了

其次，嵌套表很可怕。使用div，删除一些容器。CSS定位、浮动、边距和填充将实现相同的结果

文件编制


CSS
位置
在MDN处-
一篇关于CSS定位的列表文章-
停止使用表格进行布局@堆栈溢出-
如果您有2012年或更高版本，那么使用原生.Net工具会更好。
使用任何文本框，然后转到属性并将文本模式更改为日期时间本地。这将创建一个非常好的下拉日历。注意：如果你的IE太旧，它不会显示日历，那么也可以尝试在Chrome和Firefox上调试它。
如果你有2012或更高版本，使用原生.Net工具会更好。
使用任何文本框，然后转到属性并将文本模式更改为日期时间本地。这将创建一个非常好的下拉日历。注意：如果你的IE太旧，它不会显示日历，那么也尝试在Chrome和Firefox上调试它。
你希望我们如何运行服务器端代码，只需提供生成的html。我认为它更正确，但如果我在浏览器中运行它，它将无法在小提琴中运行，因为你的视口太小了<代码>位置：绝对
表示。。。位置，但您没有给出任何
top
或
left
--没有位置。您希望我们如何运行服务器端代码，只提供生成的html。我认为它更正确，但如果在浏览器中运行它，它将无法在小提琴中运行，因为您的视口太小了<代码>位置：绝对
表示。。。位置，但您没有给出
顶部
或
左侧
——没有位置。
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#Calimg1').click(function () {
            if (isAnyVisible()) return false;
            $('#calblock1').slideToggle("slow");
        });

        $('#Img1').click(function () {
            if (isAnyVisible()) return false;
            $('#Div2').slideToggle("slow");
        });
    });

    function isAnyVisible() {
        if ($('#Calimg1').is(':visible') || $('#Img1').is(':visible')) {
            return false;
        }
        return true;
    }