css - 在后台浮动div

Question

试图制作一个浮动div，始终在背景中使用-1 z-index，但是当我将其设为绝对位置时，它就会消失。还想用 y-repeat 图像将它放在中间。

.perchament{
    position:absolute;
    margin:0 auto;
    height:100%;
    background: url("image_assets/parchment.png") repeat-y;
    margin-top:25px;
    z-index:-1;
}

Answer 1

它消失了，因为里面没有内容，也没有指定宽度。

将此添加到您的 CSS 中：

left: 50%;
width: 100px;
margin-left: -50px;

需要设置宽度，左边距总是一半。

演示

正如其他人所说，为什么不在身体上做一个背景图像呢？

body {
    background: url("image_assets/parchment.png") center repeat-y;
}​

Answer 2

在这种特殊情况下，您需要为您的 div 添加一个宽度（因为它是绝对定位的）。

但是，关于元素的background规则或类似的东西有什么问题？body

Answer 3

绝对定位元素应该使用“顶部”和其他此类定位控件而不是边距等，并设置宽度和高度。

    .perchament{
        position:absolute;
    top: 0;
    left: 0;
width: 500px;
        margin:0 auto;
        height:100%;
        background: url("image_assets/parchment.png") repeat-y;
        margin-top:25px;
        z-index:-1;
    }

这有帮助吗？

我也会避免使用负 z-index。相反，您可以将此项目设置为 z-index: 1，然后将其上方的容器（包含其他所有内容）设置为 z-index: 2。

或者，如果它只是您想要的背景图像，您可以简单地将其放在文档的 BODY 标记而不是 div 上。BODY 或 HTML 元素始终位于堆栈的底部。