波莉背景是前景而不是背景

Question

我在代码笔上发现了一支Polly笔，我真的想把它用作背景。由于某种原因，虽然它是最上面的，我不能把我的内容放在上面。

链接到我正在使用的代码笔

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

上面是一个随机div，所以堆栈将接受代码笔链接

我想要的是一个稍微半透明的白色盒子，可以把按钮和内容放在里面，但div不会放在polly的顶部，我无法从中找到原因

如果有人能帮忙修理，那就太好了。(ps，如果你能解释一下这将是多么神奇)

Answer 1

对不起，我没有注意到钢笔是你的，我以为这是你想要的背景的一个例子。看看你的CSS，问题是你有position: relative，你需要position: absolute

原因是relative的定位是相对于自身定位的，换句话说，它保持在流中，只是相对于它开始的位置移动。它还在DOM上留下了它曾经所在的位置。当您定位absolute时，它会使其离开流，并相对于其父级(如果父级已定位)定位，或者如果父级未定位或不存在，则相对于文档定位。它不会留下空间，其他元素会重新定位并填充该空间。

在这种情况下，您的测试元素位于目标元素下方，定位为relative，因此保持在流中，位于目标下方。如果它是目标元素的子元素，它可能会使用相对定位和z索引，因为它会相对于其父div进行定位，在这种情况下，父div将是背景。

这个在你的笔上对我有用：

.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;
}

注意：z索引只需要比目标高+1，所以我更改了它。希望这有帮助！

Answer 2

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

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

更改后的部分是#bg的position: fixed;(使其覆盖整个窗口并使以下DIV位于窗口内)，以及html的height: 100%，以将梯度拉伸到全高(如果您想要的话？)

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

此外，您可以将z-index: -1添加到#bg(目前没有必要)，特别是如果您计划在其上添加其他元素。