4

I need to stack these two divs on top of each other but am having trouble finding a way to make it possible. I need to keep al the text inside in the same positions but need to be able to have the divs sit on top of one and other without setting absolute positions for them.

Here is what I have...

<body>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>


<div style="position:relative;">
  <div style="position:absolute">
    <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
    <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
  </div>
</div>

</body>
greim
  • 9,149
  • 6
  • 34
  • 35
user3233834
  • 41
  • 1
  • 1
  • 2

4 Answers4

4

You should put the content of both your divs inside an outer div which has "position:relative", and put absolute positioning on your inner divs, and add a z-index to each of them. Then the larger z-index is placed over the smaller one.

<body>
   <div style="position:relative;">
      <div style="position:absolute;z-index:0;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>

      <div style="position:absolute;z-index:1;">
         <p style="width: 762px; left:193px;" class="large-bold-font">hello hello helloT</p>
         <p id="Customer.Description" style="left: 397px; top: 45px;" class="small-font"></p>
      </div>
   </div>
</body>
Peter
  • 131
  • 1
  • 4
  • Cool, so... to clarify, you use `position:relative;` to keep in place, or box in, the `position:absolute;`? Basically `position:relative;` becomes the ancestor element of the absolute positioned elements, as per [w3schools](http://www.w3schools.com/cssref/pr_class_position.asp) that says: `"absolute: The element is positioned relative to its first positioned (not static) ancestor element"` Is this correct? – Agent Zebra Jul 03 '15 at 00:37
3

Perhaps this simple example will help you:

Link to fiddle

<body>
    <div class="one">
        Content one
    </div>
    <div class="two">
        Content two
    </div>
</body>

CSS:

.one{
    color:red;
    position:absolute;
    left:0;
    top:0;
    z-index:2;
}
.two{
    color:blue;
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}

By positioning both divs absolutely, we can then use the left and top properties, set them to the same left and top positions (it can be in pixels, percent, etc), and then determine which one should be placed on top of the other by varying the z-index. The higher z-index numbered div will be the one on top, so the .one div will be on top and you will see more red than blue. Swap the values around so that .one has z-index:1 and .two has z-index:2, and you will see more blue (since those are the font colours).

From here, you can put the rest of your content into the divs in my example.

Hiigaran
  • 829
  • 10
  • 28
2

You have a couple options:

  1. Use absolute postions on your divs. http://jsfiddle.net/sUyS3/1/

  2. You could use negative margins on your second div.

    <div style="margin-top: -25px;">

Rick S
  • 6,476
  • 5
  • 29
  • 43
0

The best way to do so is by using CSS grid.

This is a blog post explaining how to achieve this: https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute

And this is a codepen with a live example:https://codepen.io/zelig880/pen/oNdZWNa

Quick code:

.container_row{
  display: grid;
}

.layer1, .layer2{
  grid-column: 1;
  grid-row: 1;
}

.layer1{
  color: blue;
  background: red;
  animation-direction: reverse;
}

.layer2{
  color: white;
  background: blue;
}
.layer1, .layer2 {
  animation-name: fade;
  animation-duration: 10s;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
<div class="container_row">
    <div class="layer1">
        I am the layer behind
    </div>
    <div class="layer2">
        I am actually on top
    </div>
</div>
<div class="container_row">
   Yuppi! This line is positioned successfully! This would not have been the case with position:absolute
</div>
Zelig880
  • 500
  • 4
  • 6