带有位置的Div :固定在jQuery UI对话框中，不浮动到底部

Question

根据this question的说法，我应该能够做这样的事情：

<div style="position: fixed; bottom: 0px;">
  This is a test
</div>

让它浮到屏幕的底部。

我试着在JSFiddle中输入这个片段，它的工作方式与我所期望的完全一样--文本浮到了底部。

接下来，我在JSFiddle中尝试了以下内容：

<div id="test">
  <div style="position: fixed; bottom: 0px;">
    This is a test
  </div>
</div>

<input type="button" onclick="$('#test').dialog({ title: 'Test' })"/>

这产生了以下结果：

​

​

这仍然不是我想要的，因为它在屏幕的底部而不是jQuery对话框的底部，但它更接近。

但是，当我做以下工作时：

<asp:UpdatePanel ID="updatePanel" runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="historyRepeater" />
        </Triggers>

        <ContentTemplate>
            <div id="myDialog" style="display: none">
                <div style="position: fixed; bottom: 0px;">
                    This is a test
                </div>
                <!-- Rest of dialog... -->
            </div>
        </ContentTemplate>
</UpdatePanel>

它根本不会浮到底部--它只是停留在对话框的“原地”。它似乎完全忽略了CSS属性。

如何使文本浮动到对话框的底部(而不是窗口)？当我滚动时，我试图让文本保持在对话框的底部。为什么浏览器似乎完全忽略了CSS？

我正在以兼容性模式在IE11中测试它的价值。

Answer 1

将position: fixed更改为position: absolute。https://developer.mozilla.org/en-US/docs/Web/CSS/position

固定位置将定位相对于视图端口的元素。位置绝对将定位一个元素相对于其最近的非静态定位祖先。

​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<div id="test" style="position: relative; display: none;">
  <div style="position: absolute; bottom: 0px;">
    This is a test
  </div>
</div>

<input type="button" onclick="$('#test').dialog({ title: 'Test' })"/>

​