CODEWITHSUNDEEP
htmlcss
ApacheCode
ApacheCode

Reputation: 11

Overlapping and Stacking in CSS

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

Upvotes: 1

Views: 1001

Answers (1)

prodigitalson
prodigitalson

Reputation: 60413

You need to enclose all these in another div so you can group them together and position from that div instead of the document. smething like:

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

Now this means if you want to use position fixed you need to set that on #header-wrapper. By making that wrapper position any absolutely position elements inside will use wrapper's upper-left corner as the origin for positioning.

If you decide you dont want it positioned fixed then simply make it position relative with no top/left/right/bottom values and it will be rendered where it would be in normal flow. You probably want to do the latter otherwise youre not going to be able to center it without javascript or setting hard margins based on the difference between its width (780px) and its parent element's width, assuming that parent has a static width. If you do position relative though you can use auto margins to center it...

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

Upvotes: 2

Related Questions