Question

我正在制作一个网站，屏幕两侧各有一些“浮动”图像。页面的高度在900-3000像素之间，因此我创建了浮动图像来覆盖这个区域。

问题是，即使页面只有900像素高，页面也会将浮动图像看作页面上的对象，并可以滚动到它们上面。使页面比需要的时间长得多。

我可以从StackOverflow上收集到的内容。绝对元素不应该算作文档的流程，但显然这些都是。我也看到了涉及使用溢出的答案：隐藏，但这似乎没有达到预期的效果。

也许唯一的方法是使用javascript根据页面高度创建图像？

此处是相关网站的WIP：http://apa.smars.se

Answer 1

如果您想要一个仅限CSS的解决方案，那么您应该这样做：

将position:relative;和margin:0添加到<body>元素。

将下一个元素添加为<body>中的第一个元素：

<div style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;">

将<div class="botleft ...">和<div class="botright ...">元素移至该div。

将position:relative应用于<body>元素并向其添加另一个元素position:absolute; left:0; top:0; width:100%; height:100%，您要告诉该元素“跟踪”<body>元素的大小。通过添加overflow:hidden;隐藏底部溢出的图像。

此解决方案的缺点是您可能会在页面底部看到剪切图像。没有什么是完美的。）

以下是此更改后DOM树的外观

enter image description here

要立即查看结果，您可以从浏览器控制台运行以下代码：

d = document.createElement("div");
d.style.cssText = "position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;";
document.body.insertBefore(d, document.body.firstChild);
d.appendChild(document.getElementsByClassName("botleft")[0]);
d.appendChild(document.getElementsByClassName("botright")[0]);
document.body.style.position = "relative";
document.body.style.margin = "0";

Answer 2

当你给一个元素absolute位置时，它与包含绝对元素的第一个relative元素绝对相关。

因为元素的默认位置是静态的，您可能需要为容器元素更改它（在您的情况下可能是body）。

祝你好运！

使元素不影响页面高度（因此滚动）

2 个答案: