All geek questions in one place

I need to stack these two divs on top of each other, keeping the content position

I need to put these two divs on top of each other, but it's hard for me to find a way to make this possible. I need to keep the text inside in the same positions, but I need to be able to split the div on the same one, 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>
+4
source share
3 answers

You have to put the contents of both of your divs inside the outer div, which has a "position: relative", and put the absolute positioning in your inner divs and add a z-index for each of them. Then the larger z-index is placed above the smaller.

<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>
+4
source

, :

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

divs , , ( , ​​..), , - z-. z-index div , .one div , , . , .one z-index: 1 .two z-index: 2, ( ).

div .

+3

:

+2

Source: https://habr.com/ru/post/1523635/

More articles:


All Articles