overlay：svg会移动overlay-div，它们不再匹配

时间：2018-08-14 21:44:46

标签： html css svg overlay

我是这里的新手，所以如果我问错这个问题或忘记了一些东西，我会在前面道歉。我尝试了其他问题/答案来解决问题，但没有任何办法可以解决我的问题。

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

2 个答案:

答案 0 :(得分：1)

实现完美重叠的通常方法是使用position属性。要重叠两个元素，您可以：

  1. 将它们包装在您position: relative的父母中
  2. 让两个孩子成为position: absolute。绝对定位使您可以相对于元素的最近“定位父对象”定位元素。这最后一部分是为什么我们在步骤1中将父位置设为相对位置。
  3. 使用top: 0
    4. 确保它们彼此重叠

演示：

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

答案 1 :(得分：0)

您无需将第二个div悬停在第一个div的顶部，而是隐藏第一个div并显示第二个div即可达到相同的效果。片段：

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

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

.container:hover .svg {
  display: none;
}

.div2 {
  width: 500px;
  height: 800px;
  color: white;
  margin: auto;
  margin-top: 8px;
  transition-timing-function: ease;
  transition-delay:  0.5s;
  transition-duration:  0.5s;
  transition-property:  all;
}
<div class="container">
<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>
 
<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>

相关问题
最新问题