html - overlay:svg 移动 overlay-div，它们不再匹配

Question

我是新来的，所以如果我问错了问题或忘记了什么，我先道歉。我尝试了其他问题/答案中的内容，但无法解决我的问题。

我在 div1 上有一个简单的叠加 div2。 div1 里面有一个 svg。 svg 向下悬停时会插入 div2，使其不重叠。我希望两个 div 完美重叠，以便 div1 的 svg 在 div2 下消失。

我希望有人能帮助我。

代码如下:

.div1 {
  width: 500px;
  background-color: #1b1412;
  padding: 20px;
  margin: auto;  
}

.svg {
  width: 500px;
  height: 800px;
  opacity: 0.9;

}

.div2 {
  width: 500px;
  height: 800px;
  margin: auto;
  position: relative;
  margin-top: 8px;
  opacity:  0.0;
  transition-timing-function:  ease;
  transition-delay:  0.5s;
  transition-duration:  0.5s;
  transition-property:  all;
  -moz-transition-duration:  0.5s;
  -o-transition-duration:  0.5s;
  -webkit-transition-duration:  0.5s; 
}

.div2:hover {
  opacity: 1.0;
}

<center>
  <div class="div1">
  <div class="svg">
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#5b2322;stroke-miterlimit:10;stroke-width:18px;}.cls-2{font-size:92px;fill:#d6c9c6;font-family:Alter-Inline-Grunge, Alter Inline Grunge;}.cls-3{letter-spacing:0.04em;}.cls-4{letter-spacing:0.06em;}.cls-5{letter-spacing:0.06em;}.cls-6{letter-spacing:0.06em;}.cls-7{letter-spacing:0.04em;}.cls-8{letter-spacing:0.06em;}.cls-9{letter-spacing:0.06em;}.cls-10{letter-spacing:0em;}.cls-11,.cls-13,.cls-14{font-family:Ruthie-Regular, Ruthie;}.cls-12{letter-spacing:0em;}.cls-13{font-size:100px;}.cls-13,.cls-14{fill:#9d6763;}.cls-14{font-size:57px;}</style></defs><title>Prospero's Dream</title><polygon class="cls-1" points="311.81 124.73 240.74 42.67 169.67 124.73 98.59 206.78 169.67 288.84 240.74 370.89 311.81 288.84 382.88 206.78 311.81 124.73"/><text class="cls-2" transform="translate(75.9 242.72)"><tspan class="cls-3">P</tspan><tspan class="cls-4" x="35.69" y="0">r</tspan><tspan class="cls-5" x="75.71" y="0">o</tspan><tspan class="cls-6" x="112.79" y="0">s</tspan><tspan class="cls-7" x="149.77" y="0">p</tspan><tspan class="cls-8" x="185.47" y="0">e</tspan><tspan class="cls-9" x="222.54" y="0">r</tspan><tspan class="cls-10" x="262.56" y="0">o</tspan><tspan class="cls-11" x="294.3" y="0">‘</tspan><tspan class="cls-12" x="309.75" y="0">s</tspan></text><text class="cls-13" transform="translate(141.29 294.74)">Dream</text><text class="cls-14" transform="translate(180.3 173.5)">Lost in</text></svg>
 
  <div class="div2"> 

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  </div> 
    </div>
    

Answer 1

实现完美重叠的一般方法是使用position 属性。要重叠两个元素，您:

1. 将它们包裹在您设置为 position: relative
的父级中
2. 让两个 child position: absolute。绝对定位使您可以相对于最近的“已定位父级”定位元素。最后一部分是我们在第 1 步中将父位置设置为相对位置的原因。
3. 使用 top: 0
确保它们彼此重叠

演示:

.container {
  position: relative;
}

.div1 {
  position: absolute;
  top: 0;
  width: 500px;
  height: 800px;
  background-color: #1b1412;
  margin: 0 auto;  
}

.svg {
  width: 100%;
  opacity: 0.9;
}

.div2 {
  position: absolute;
  top: 0;
  width: 500px;
  height: 800px;
  margin-top: 8px;
  opacity:  0.0;
  transition-timing-function:  ease;
  transition-delay:  0.5s;
  transition-duration:  0.5s;
  transition-property:  all;
  -moz-transition-duration:  0.5s;
  -o-transition-duration:  0.5s;
  -webkit-transition-duration:  0.5s; 
}

.div2:hover {
  opacity: 1.0;
}

<div class="container">

  <div class="div1">
    <svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{fill:none;stroke:#5b2322;stroke-miterlimit:10;stroke-width:18px;}.cls-2{font-size:92px;fill:#d6c9c6;font-family:Alter-Inline-Grunge, Alter Inline Grunge;}.cls-3{letter-spacing:0.04em;}.cls-4{letter-spacing:0.06em;}.cls-5{letter-spacing:0.06em;}.cls-6{letter-spacing:0.06em;}.cls-7{letter-spacing:0.04em;}.cls-8{letter-spacing:0.06em;}.cls-9{letter-spacing:0.06em;}.cls-10{letter-spacing:0em;}.cls-11,.cls-13,.cls-14{font-family:Ruthie-Regular, Ruthie;}.cls-12{letter-spacing:0em;}.cls-13{font-size:100px;}.cls-13,.cls-14{fill:#9d6763;}.cls-14{font-size:57px;}</style></defs><title>Prospero's Dream</title><polygon class="cls-1" points="311.81 124.73 240.74 42.67 169.67 124.73 98.59 206.78 169.67 288.84 240.74 370.89 311.81 288.84 382.88 206.78 311.81 124.73"/><text class="cls-2" transform="translate(75.9 242.72)"><tspan class="cls-3">P</tspan><tspan class="cls-4" x="35.69" y="0">r</tspan><tspan class="cls-5" x="75.71" y="0">o</tspan><tspan class="cls-6" x="112.79" y="0">s</tspan><tspan class="cls-7" x="149.77" y="0">p</tspan><tspan class="cls-8" x="185.47" y="0">e</tspan><tspan class="cls-9" x="222.54" y="0">r</tspan><tspan class="cls-10" x="262.56" y="0">o</tspan><tspan class="cls-11" x="294.3" y="0">‘</tspan><tspan class="cls-12" x="309.75" y="0">s</tspan></text><text class="cls-13" transform="translate(141.29 294.74)">Dream</text><text class="cls-14" transform="translate(180.3 173.5)">Lost in</text></svg>
  </div>

  <div class="div2"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<br>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>

</div>