Question

我正在尝试调整z索引顺序，以便第一个类比第二个类更接近。

但我不能为我的生活得到一个盒子阴影来展示。

    .title {
        background-image: linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -o-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -moz-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -webkit-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);
        background-image: -ms-linear-gradient(bottom, rgb(249,252,249) 33%, rgb(255,255,255) 37%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.33, rgb(249,252,249)),
            color-stop(0.37, rgb(255,255,255))
        );
        box-shadow: 0px 1px 5px rgba(0,0,0,1);
        height: 50px;
        z-index: 1;
    }

.banner {
    background-image:url('images/grad.jpg');
    background-color:#cccccc;
    height: 500px;
    z-index: -1;
}

但这对我不起作用。

标记＆GT;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Design Test | PolyDevs</title>
<link rel="stylesheet" type="text/css" href="style.css">
<div class="header">
    <div class="title">
        <div class="logo">
            <img src="images/banner.png"/>
        </div>
    </div>
</div>
</head>
<body>
<div class="banner">

</div>
</body>
</html>

Answer 1

职位：相对;解决了我的问题，为什么？

绝对定位元素的行为由一个相对的父元素定位。

如果没有元素相对定位，那么默认为相对定位的<body>元素将成为指定“from”位置的父元素（ left，right，bottom，top ）

示例：

<body> <div class="posrelative"> <div class="posabsolute">hello world</div> </div> </body>
根据父包装<div>的位置，
Hello world 无法定位，这可能是侧边栏或页脚等...

<body> <div> <div class="posabsolute">hello world</div> </div> </body>

Hello world 现在可以定位为绝对值，但不能再根据父<div>的位置定位，而是根据<body>以外的位置填充默认情况下浏览器窗口的整个宽度

CSS Z-Index问题

1 个答案: