滑塊的邊距問題

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，那麼我的提示是重新編碼整個網站，它會方便維護。

祝你好運。