Überlappen und Stapeln in CSS

Ich bin Programmierer und lerne neue Techniken in der Webentwicklung. Ich bin auf ein Problem gestoßen, wenn Sie den folgenden Link sehen konnten. http://bailesslaw.com/Bailess_003/bailesHeader/header.html Dieses Beispiel, das ich machte, ist nicht fest und es muss sein, das wird schwierig.Überlappen und Stapeln in CSS

Das sieht gut hier aus, aber wenn ich diese Ebenen auf der Hauptwebseite, index.html, setze diesen Code als Kopfzeile, bewegt sich das Banner in der Dokumentenposition 0,0. Ich brauche diese Kästchen, die Seite zentriert und ich kann sie nicht dazu bringen, das zu tun, ohne die Reihenfolge und den Inhalt der Ebenen durcheinander zu bringen.

Layer1 rotierende Bilder, js die Rotation Layer2-blaues Dreieck Effekt mit Kulisse überlappenden Schichten 1, Layer 3-ist ein statisches Bild mit einem hohen Z-Index

Below I einen Code einschließlich verursacht, die wichtiger Teil, der 3 überlappende Schichten benötigt, die genau in Breite und Höhe übereinstimmen, außer dass er in der Mitte 780px breit fixiert werden muss.

Code:

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

Quelle

2011-01-09 ApacheCode

Bitte stellen Sie eine jsfiddle @ http://jsfiddle.net/ – PeeHaa

Sie müssen diese alle in einem anderen div umschließen, so dass Sie sie gruppieren und die Position von diesem div anstelle des Dokuments. smething wie:

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

Nun bedeutet dies, wenn Sie Position verwenden möchten, festgelegt, dass auf #header-wrapper einstellen müssen. Wenn Sie diese Wrapper-Position verwenden, werden alle absoluten Positionselemente im Inneren die obere linke Ecke der Wrapper als Ursprung für die Positionierung verwenden.

Wenn Sie entscheiden, dass Sie es nicht positioniert fixed positionieren möchten, dann machen Sie es einfach relative Position ohne obere/links/rechts/unten Werte und es wird gerendert werden, wo es im normalen Fluss wäre. Wahrscheinlich möchten Sie Letzteres tun, sonst können Sie es nicht ohne Javascript zentrieren oder harte Ränder setzen, basierend auf dem Unterschied zwischen seiner Breite (780px) und der Breite seines Elternelements, vorausgesetzt, dass das Elternteil eine statische Breite hat. Wenn Sie Position relativ zu tun, obwohl können Sie die automatische Ränder verwenden, um sie zu zentrieren ...

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

Quelle

2011-01-09 04:28:24 prodigitalson

Nur für den Fall verpassen Sie es in Die Details hier, die "Position: relativ" im Wrapper ist hier der Schlüssel. – keithjgrant

Überlappen und Stapeln in CSS

Antwort

Verwandte Themen