Question

我在我真的想用作背景的代码笔上找到了一支波利笔。由于某些原因，虽然它是最高的，但我不能将其内容放在其顶部。

<div id="bg"></div>

上面是一个随机的div，因此堆栈将接受codepen链接

我想要的是一个稍微半透明的白框，可以在其中放置按钮和内容，但div不会放在波利的顶部，我不能从

中找出原因。

如果有人可以帮助修复它，那就太好了。（请注意，如果可以解释，那将是ps）

Answer 1

对不起，我错过了一支钢笔是您的事实，我认为这是您想要的背景的一个例子。查看CSS，问题在于您拥有import json import os import sys packages_path = os.path.join(os.path.split(__file__)[0], "packages") sys.path.append(packages_path) import requests #moved this line down after adding packages_path to sys.path，并且需要position: relative

原因是因为position: absolute定位是相对于自身定位的，换句话说，它保持在流中，只是相对于其开始位置而移动。它还在DOM所在的位置留下了空间。当您放置relative时，它会从流程中移出，并相对于其父项（如果已放置父项）而定位，或者相对于文档是父级未定位或不存在。它不会留下任何空间，其他元素将重新定位自身并填充该空间。

在这种情况下，您的测试元素位于目标元素的之下，定位为absolute，因此保留在流程中-目标之下。如果它是目标元素的子元素，则它可能已经使用了相对定位和z-index，因为它相对于其父div（在这种情况下将是背景）相对定位。

这对我在您的笔上有效：

relative

注意：z索引仅需比目标高+ .Card{ position: absolute; top: 110px; left: 50%; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; color: white; z-index: 2; }，因此我对其进行了更改。希望这会有所帮助！

Answer 2

尝试如下更改这些规则，我想这就是您想要的：

html {
  background: radial-gradient(ellipse at center, #ff8300 0%, black 100%);
  overflow: hidden;
  height: 100%;
}

#bg{
  position: fixed;
  height: 100%;
}

已更改的部分是position: fixed;的{{1}}（以使其覆盖整个窗口并使下面的DIV处于窗口内），以及#bg的{{1} }以将渐变拉伸到最大高度（如果需要）？

https://codepen.io/anon/pen/yGvEpx

此外，您可以将height: 100%添加到html（目前没有必要），特别是如果您计划在其顶部添加其他元素。

Polly背景是前景而非背景

2 个答案: