滑块的保证金困难

Question

每当我将这个滑块放在我正在开发的网站上的某个地方时，它都会与所有内容重叠。我怎样才能让它根据它的大小设置边距？这样它就不会位于所有事物之上，而是将事物移出它的方式。

P.S 是的，我知道有两个相同的推荐，我只是想要 5 个以供将来参考，所以我复制了一个。 :P

这是codepen的链接。

.test-slider {
  margin: 15% auto;
}
.test-slide {
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  min-width: 25%;
  max-width: 60%;
  animation: test-slider 100s infinite;
  -webkit-animation: test-slider 100s infinite;
  opacity: 0;
}
figure.test div {
  display: inline-block;
  vertical-align: middle;
  padding: 1em 1em 0em 1em;
  margin-bottom: 0.5em;
}
figure.test {
  padding: 1em;
  font-family: lato !important;
  overflow: hidden;
  color: #000000;
  font-size: 1em;
  background-color: #2d2d2d;
  background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 0.3em 0.3em 0.3em 0.3em;
}
figure.test h2,
figure.test h4 {
  font-family: lato;
  text-transform: none;
  margin: 0;
}
figure.test h2 {
  font-weight: bold;
  color: white;
}
figure.test h4 {
  font-weight: normal;
  color: #a6a6a6;
}
figure.test img {
  margin-left: 1.5em;
  vertical-align: middle;
  width: 8em;
}
figure.test .img-circle {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
figure.test .img-border {
  border: 0.5em solid tan;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}
figure.test p {
  color: black;
  font: lato;
  margin-left: 2em;
  margin-right: 2em;
  padding: 1em;
  opacity: 1;
  font-style: italic;
  font-size: 1em;
  background-color: white;
  border-radius: 0.3em 0.3em 0.3em 0.3em;
  box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
  text-align: left;
}
figure.test p {
  border: none;
  position: initial;
  content: " ";
  quotes: "\201C""\201D""\2018""\2019";
}
figure.test p:before {
  content: open-quote;
}
figure.test p:after {
  content: close-quote;
}
@keyframes test-slider {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
}
div.test-slide:nth-child(0) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
div.test-slide:nth-child(1) {
  animation-delay: 20s;
  -webkit-animation-delay: 20s;
}
div.test-slide:nth-child(2) {
  animation-delay: 40s;
  -webkit-animation-delay: 40s;
}
div.test-slide:nth-child(3) {
  animation-delay: 60s;
  -webkit-animation-delay: 60s;
}
div.test-slide:nth-child(4) {
  animation-delay: 80s;
  -webkit-animation-delay: 80s;
}

<div class="test-slider">
  <div class="test-slide">
    <figure class="test">
      <div>
        <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
        <div>
          <h2>John &amp; Sara</h2>
          <h4>Couple</h4>
        </div>
      </div>
      <p>John and I finally had a night to sit down and watch our video! Thank you so much for the absolutely amazing job you both did! We love the video and song choices! We are so happy you guys were able to work with us last min and do our wedding. There
        were so many things that you captured that we had forgotten already and we now have those memories to hold forever! This truly was the best day of our life, thank you for capturing it for us! It means the world!
      </p>
    </figure>
  </div>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Crisbel &amp; Daniel</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Thank you for a job well done regarding the video. From the full video to the highlights and separating the performances. I love how you guys did it. It's really great! We'll definitely recommend your business. You guys exceeded our expectation. :)
    </p>
  </figure>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Kris &amp; Annelise</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Annelise and I love our video. It captured all the highlights, the music was a great choice, and it made us both laugh and cry. Thank you for all the hard work and effort you both put in to making the video.
    </p>
  </figure>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Kris &amp; Annelise</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Annelise and I love our video. It captured all the highlights, the music was a great choice, and it made us both laugh and cry. Thank you for all the hard work and effort you both put in to making the video.
    </p>
  </figure>
</div>

<div class="test-slide">
  <figure class="test">
    <div>
      <img class="img-border img-circle" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <div>
        <h2>Jahmeil &amp; Angel</h2>
        <h4>Couple</h4>
      </div>
    </div>
    <p>Thank you so much Michael and Dora, it was absolutely beautiful! We loved every minute of it. You did a great job interviewing and editing the video to show the highlights of our special day. We have already watched it twice lol the length and content
      are absolutely perfect!
    </p>
  </figure>
</div>

</div>

Answer 1

如果我理解正确，您需要为此使用z-index: -1。此外，您需要将其放在一个 div 中并直接为其设置边距。

如果这没有帮助，请发布网站链接或更新 CodePen 代码，看看到底出了什么问题。

更新：

这可能是一个临时解决方案，但总比没有好。

你需要：

• 将position: relative 添加到.fl-html div，其中包含滑块div。
• 将 max-width 更改为 100% 或将其从 .test-slide div 中删除
• 在.test-slide div 中将width 更改为100%。

然后，您需要使用媒体查询为滑块添加边距，以防止滑块与视频重叠。

为移动、中小型屏幕添加样式，看起来不错。

另外，我想提一下，div 太多了。如果您使用的是 WordPress，那就……嗯……它可能会更好，但是如果您正在构建一个网站而不使用 WordPress 或任何其他 CMS，那么我的建议是重新编码整个网站，它会更容易维护。

祝你好运。