滑块的边距问题

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代码，以确切地看到什么是错的。

UPDATE：

这可能是一个临时的解决方案，但它仍然是聊胜于无。

您需要：

• 添加position: relative到.fl-html股利，其中包含滑块的div。
• 变化max-width到100％或从.test-slide DIV中删除它
• 变化width至100％在.test-slide DIV。

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

为手机，中小屏幕添加样式，使其看起来不错。

另外，我想提一下，有太多的div。如果你使用的是WordPress，那么它就是..嗯..它可以更好，但如果你正在建设一个网站，而不是使用WordPress或任何其他CMS，那么我的提示是重新编码整个网站，它会方便维护。

祝你好运。