带有滚动的 Div 和带有绝对位置的内容

Posted 2023-03-06

【中文标题】带有滚动的 Div 和带有绝对位置的内容

【英文标题】：Div with scroll and content with absolute positions

【发布时间】：2010-10-03 10:22:41

【问题描述】：

我有一个带有样式的“div”：overflow-y: scroll; overflow-x: auto; 我尝试使用绝对或相对位置在此“div”内动态添加图像。在用户尝试滚动“div”内容之前，一切似乎都很好：图像相对于浏览器窗口保持在固定位置。这个问题似乎只在 IE(7) 中，在 Firefox 中一切都很好。 有什么解决方案吗？

编辑（回答下面提出的问题）：我正在定位元素，因为我需要它显示在另一个元素的前面。

【问题讨论】：

您能否发布您正在使用的 html 和 CSS 示例？

我在 Chrome 23 中遇到了同样的问题..

【参考方案1】：

我不知道这是 IE 中的错误还是“功能”，但我之前遇到过同样的事情。幸运的是，有一个简单的解决方法。只需将“position:relative”添加到具有可滚动内容的<div>。

【讨论】：

我花了很多时间试图解决它！谢谢。它也帮助了我！

天哪，我花了好长时间才找到这个！

不保持标题固定？

【参考方案2】：

将所有内容包装在页面上相对定位的包含 div 中：

<div style="display:block; position:relative; width:200px; height:200px; margin:0; padding:0;">
    <br />
    <img src="_foo_.gif" style="position:absolute; top:0; left:0; z-index:100;" />
    <br />
    <div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px; z-index:10; display:block; position:relative;">
        <br />[scrolling content]<br />
    </div>
    <br />
</div>

【参考方案3】：

您是否有特殊原因需要为图像设置位置？它在 IE7 中运行良好，无需设置位置。

<div style="overflow-x:auto; overflow-y:scroll; width:200px; height:200px;"><img src=xxx.gif"   /></div>

【参考方案4】：

试试float:left 或float:right 和margin

我在 chrome 中遇到了与 position:absolute 在 overflow-y: auto; 中相同的问题。 div 在滚动时固定在那里。

一个简单的解决方案是使用浮点数。

我的旧代码是-

position:absolute; right:10px;

我用以下内容替换它并且它有效-

float:right; margin-right:10px;

【参考方案5】：

你知道吗，将绝对定位的元素包装在相对定位的容器元素中可能更容易，我认为应该能够滚动......

【参考方案6】：

我学到了很多东西：对于 IE6/IE7，它可能需要将图像作为包含 DIV 中的最后一个 DOM 元素，以使其出现在滚动的 DIV 上。

【参考方案7】：

如果您希望它能够滚动，则需要使用相对定位。诀窍是在第二个元素上使用负定位。

假设您有两个元素 A 和 B，并且您想将 B 放在 A 的前面。它看起来像这样：

<div id="A" style="position:relative; width:300px; height=240px;">Element A</div>

<div id="B" style="position:relative; width:300px; height=240px; top:-240px;">Element B</div>

根据内容，您可能需要添加其他样式，例如“display:block;”等等。w3schools.com 是一个很好的资源

有关使用 CSS 进行 DIV 定位的优秀教程，请访问：

http://www.barelyfitz.com/screencast/html-training/css/positioning/

干杯

【参考方案8】：

声明position: absolute; 表示元素将相对于视口的左上角显示。改用relative 意味着您用于left 和top 的值将添加到img 本来应该存在的位置。

【讨论】：

固定位置相对于视口，绝对位置相对于父元素。

更准确地说，绝对位置是相对于最近定位的父对象（例如 position: relative）。