jquery - 位置为 : fixed inside a jQuery UI Dialog Box doesn't float to the bottom 的 Div

Question

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

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

让它漂浮到屏幕底部。

我尝试在 JSFiddle 中输入该片段，它完全按照我的预期工作 - 文本 float 到底部。

接下来，我在 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 属性。

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

我正在 IE11 的兼容模式下测试它的值(value)。

Answer 1

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

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

定位元素。

<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' })"/>