在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中重疊和堆疊

回答

相關問題