Div with position: fixed inside a jQuery UI Dialog Box 不浮动到底部答案

【问题标题】：Div with position: fixed inside a jQuery UI Dialog Box doesn't float to the bottomDiv with position: fixed inside a jQuery UI Dialog Box 不浮动到底部
【发布时间】：2017-09-21 18:25:24
【问题描述】：

根据this question，我应该可以这样做：

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

让它浮动到屏幕底部。

我尝试在 JSFiddle 中只输入那个 sn-p，它完全按照我的预期工作 - 文本浮动到底部。

接下来，我在 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 中测试它的价值。

【问题讨论】：

标签： jquery html css asp.net jquery-ui

【解决方案1】：

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

Position fixed 将相对于 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' })"/>

【讨论】：