CSS Z-Index 问题答案

【问题标题】：CSS Z-Index issuesCSS Z-Index 问题
【发布时间】：2013-10-26 23:20:18
【问题描述】：

我正在尝试调整 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;
}

但这对我不起作用。

标记>

<!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>

【问题讨论】：

请发布您的 HTML
您也可以分享您的标记 (HTML) 吗？ z-index 是 set relatively 所以你的标记很重要......
横幅的父元素是否设置为position: relative？我知道这在过去让我绊倒了
位置：相对；解决了我的问题，这是为什么呢？谢谢大家
不要在head 中添加div。

标签： css

【解决方案1】：

位置：相对；解决了我的问题，这是为什么呢？

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

如果没有元素是相对定位的，那么 <body> 元素，默认情况下是相对定位的，将成为指定“从”位置（left,right,bottom,top )

示例：

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

Hello world 无法根据父包装 <div> 的位置进行绝对定位，这可能是侧边栏或页脚等...

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

Hello world 现在可以绝对定位，但不再基于父级<div> 的位置，而是基于<body> 之外的位置，填充了整个宽度默认浏览器窗口

【讨论】：