CSS中的重叠和堆叠答案

【问题标题】：Overlapping and Stacking in CSSCSS中的重叠和堆叠
【发布时间】：2011-01-09 03:16:56
【问题描述】：

我是一名程序员，正在学习 Web 开发方面的新技术。如果您可以查看下面的链接，我遇到了问题。 http://bailesslaw.com/Bailess_003/bailesHeader/header.html 我做的这个例子不是固定的，它需要固定，这变得越来越困难。

这里看起来不错，但是当我将这些图层放在主网站 index.html 上时，将此代码作为标题放置，横幅会移动到文档位置 0,0 。我需要固定这些框，居中页面，如果不弄乱图层顺序和内容，我无法让它们做到这一点。

Layer1-旋转图片，js导致旋转 Layer2-蓝色三角形与背景效果重叠第 1 层，第 3 层 - 是具有高 z-index 的静态图像

下面我包含了一些代码，重要的部分需要3个重叠层在宽度和高度上完全匹配，除了它必须固定在中心780px宽。

代码：

<style rel="stylesheet" type="text/css">
div#layer1 {
    border: 1px solid #000;
    height: 200px;
    left: 0px;
    position: fixed;
    top: 0px;
    width: 780px;
    z-index: 1;
}
div#layer2 {
    border: 1px solid #000;
    height: 200px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 780px;
    z-index: 2;
}
div#layer3 {
    border: 1px solid #000000;
    height: 200px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 780px;
    z-index: 3;
}
</style>
</head>
<body class="oneColFixCtr">
    <div id="container">
        <div id="mainContent">
            <div id="layer1">
            </div>
            <div id="layer2">
                <div class="slideshow">
                    <span id="rotating1">
                        <p class="rotating">
                        </p>
                    </span>
                    <span id="rotating2">
                        <p class="rotating">
                        </p>
                    </span>
                    <span id="rotating3">
                        <p class="rotating">
                        </p>
                    </span>
                    <span id="rotating4">
                        <p class="rotating">
                        </p>
                    </span>
                </div>
            </div>
            <div id="layer3">
                <table width="385" border="0">
                    <tr>
                        <th width="81" scope="col">
                            &nbsp;
                        </th>
                        <th width="278" scope="col">
                            &nbsp;
                        </th>
                        <th width="12" scope="col">
                            &nbsp;
                        </th>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                        <td>
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <!-- end #container -->
    </div>
</body>
</body>

</html>

CSS：

@charset "utf-8";
CSS code:
#rotating1 {
    height: 200px;
    width: 780px;
}
#rotating2 {
    height: 200px;
    width: 780px;
}
#rotating3 {
    height: 200px;
    width: 780px;
}
#main {
    background-repeat: no-repeat;
    height: 200px;
    width: 780px;
    z-index: 100;
}
#test {
    width: 780px;
    z-index: 2;
}
#indexContent {
    background-color: #12204d;
    background-repeat: no-repeat;
    height: 200px;
    width: 780px;
    z-index: 1;
}
#indexContent p {
    padding: .5em 2em .5em 2em;
    text-align: justify;
    text-indent: 2em;
}
.rotating {
    float: right;
    margin-top: 227px;
    text-indent: 0px !important;
}
.clearfix:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}

【问题讨论】：

请设置一个 jsfiddle @jsfiddle.net

标签： html css

【解决方案1】：

您需要将所有这些都包含在另一个 div 中，以便您可以将它们组合在一起并从该 div 而不是文档中定位。类似的东西：

<div id="header-wrapper">
  <div id="layer1"></div>
  <div id="layer2"></div>
  <div id="layer3"></div>
</div>

现在这意味着如果你想使用固定位置，你需要在#header-wrapper 上设置它。通过使该包装器位置，内部的任何绝对位置元素都将使用包装器的左上角作为定位原点。

如果您决定不希望它定位fixed，那么只需将其设置为相对位置，没有顶部/左侧/右侧/底部值，它将呈现在正常流程中的位置。您可能想要执行后者，否则您将无法在没有 javascript 或基于其宽度（780px）与其父元素宽度之间的差异设置硬边距的情况下将其居中，假设父元素具有静态宽度。如果你做相对位置，虽然你可以使用自动边距来居中......

CSS：

#header-wrapper {
  position: relative;
  margin: 0 auto; // this will center the wrapper in its parent
  width: 780px;
  height: 200px;
}

#layer1 {
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 200px;
  border: 1px solid #000;
}

#layer2 {
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 200px;
  border: 1px solid #000;
}

#layer3 {
  background-image: url('http://bailesslaw.com/Bailess_003/bailesHeader/image/final_header_blue_triangle1.png');
  z-index: 3;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 200px;
  border: 1px solid #000000;
}

【讨论】：

万一你错过了这里的细节，包装器中的'位置：相对'是这里的关键。