在CSS中重叠和堆叠

我是一名程序员，学习web开发中的新技术。如果您可以查看下面的链接，我遇到了问题。 http://bailesslaw.com/Bailess_003/bailesHeader/header.html 我给出的这个例子没有固定，它需要变得越来越困难。在CSS中重叠和堆叠

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

Layer1的旋转图像，JS使旋转二层蓝色三角形与背景效果重叠层1，三层技术是具有高的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; 
}

来源

2011-01-09 ApacheCode

请设置一个的jsfiddle @ http://jsfiddle.net/ – PeeHaa 2011-01-09 03:23:19

你需要附上所有这些在另一个div这样你就可以集合在一起进行位置从div，而不是文件。 smething像：

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

来源

2011-01-09 04:28:24 prodigitalson

万一你错过它这里的细节，包装中的'位置：相对'是这里的关键。 – keithjgrant 2011-01-09 05:43:26

在CSS中重叠和堆叠

回答

相关问题