Question

我是一名程序员，并在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;
}

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

CSS中的重叠和堆叠

1 个答案: