我需要在维护内容位置的同时，将这两个div堆叠在彼此之上

我需要将这两个div堆叠在彼此之上，但是很难找到使它成为可能的方法。我需要将文本保持在相同的位置，但需要能够将Divs放在另一个位置，而不会为其设定绝对位置。

这是我拥有的...

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

您应该将两个divs的内容放在具有"位置：相对"的外部div中，并将绝对定位放在您的内部divs上，并在每个部门上添加z索引他们。然后将较大的z索引放在较小的z指数上。

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

也许这个简单的示例会帮助您：

链接到小提琴

<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索引编号为顶部的DIV将是最上面的Div，因此。One Div将在顶部，您会看到红色比蓝色更多。交换围绕的值。

从这里，您可以将其余的内容放入我的示例中。

您有几个选项：

使用Divs上的绝对帖子。http://jsfiddle.net/suys3/1/
您可以在第二个部门上使用负余量

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

最好的方法是使用CSS网格。

这是一篇博客文章，解释了如何实现这一目标：https：//zelig880.com/how-to-stack-two-elements-ect-on-top-of------------------------------------------/p>

这是一个现场示例的编码epen：https：//codepen.io/zelig880/pen/ondzwna

快速代码：

.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>

相关内容

最新更新

热门标签：