Article From:https://segmentfault.com/q/1010000013341267
Question:

You want to place the entire swiper-container at 30px from the bottom of the window, but bottom is invalid.

<html>
 <head> 
  <meta charset="utf-8" /> 
  <link rel="stylesheet" href="http://www.swiper.com.cn/dist/css/swiper.min.css" /> 
  <style>
    body {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width:100%;
      height:100%;
      max-width:580px;
    }
    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 100px;
      height:100px;
    }
  </style> 
 </head> 
 <body> 
  <div class="swiper-container"> 
   <div class="swiper-wrapper"> 
    <div class="swiper-slide" style="background-color:red"></div> 
    <div class="swiper-slide" style="background-color:blue"></div> 
    <div class="swiper-slide" style="background-color:green"></div> 
    <div class="swiper-slide" style="background-color:gray"></div> 
   </div> 
  </div>  
 </body>
</html>

Answer 0:
.swiper-container {
  height:100px;
  max-width:580px;
      position: fixed;
      bottom: 30px;
      left: 50%;
  transform: translate(-50%);
}

Answer 1:
.swiper-container {
    width: 100%;
    height: 100%;
    max-width: 580px;
    position: absolute;
    bottom: 30px;
}

Answer 2:

If you want the parent element and child element to be positioned at the same time, then he will be effective.

Answer 3:

position:fixed;
bottom:30px;

Leave a Reply

Your email address will not be published. Required fields are marked *