带位置的Div：固定在jQuery UI对话框中'；不要浮到水底

根据，我应该可以做这样的事情：

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

这是一个测试

让它浮到屏幕底部

我试着在JSFIDLE中只输入那个片段，它完全按照我预期的方式工作——文本浮动到底部

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

<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兼容模式下测试它的价值。

将

位置：固定
更改为
位置：绝对

“位置固定”将相对于视口定位元素。绝对位置将相对于其最近的非静态定位祖先定位元素



这是一个测试
将
位置：固定
更改为
位置：绝对

“位置固定”将相对于视口定位元素。绝对位置将相对于其最近的非静态定位祖先定位元素



这是一个测试