滑块保证金困难

Question

每当我将此滑块放在我正在使用的网站上的某个位置时，它就会与所有内容重叠。我怎样才能根据它的大小设置边距？这样它就不会位于一切之上，而是一切都会被移开。

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

这里是link到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: "1C""1D""18""19";
}
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 并直接为其设置边距。

如果这没有帮助，post 网站 link 或更新 CodePen 代码以查看到底出了什么问题。

更新：

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

您需要：

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

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

添加手机、中小屏的样式，好看。

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

祝你好运。

滑块保证金困难

Margin Difficulties with slider

html

css

position

margin

padding