Overlapping and Stacking in CSS
- by ApacheCode
Hello,
I'm a programmer and learning new techniques in web development. I've ran into a problem if you could look at the link below.
http://bailesslaw.com/Bailess_003/bailesHeader/header.html
This example I made isnt fixed and it needs to be, which is becoming difficult.
This looks fine on here, but when I put those layers on main website, index.html, place this code as the header, the banner moves in the documents position 0,0 . I need these boxes fixed, center page and I cannot get them to do that without messing up the layers order and content.
Layer1-rotating images, js causes the rotation
Layer2-blue triangle with backdrop effect overlapping layer 1,
Layer 3-is a static image with a high z-index
Below I including some code, the important part that needs 3 overlapped layers exactly matching in width and height, except it has to be fixed in center 780px wide.
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">
</th>
<th width="278" scope="col">
</th>
<th width="12" scope="col">
</th>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</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;
}
