html - 2列和一个滑块合而为一，它会下降

Question

我有这个 CSS 和 HTML，每次使用页面缩放时，滑块都会下降，并且在列中不可见。有什么帮助吗？

 .mask{
   position: relative;
   overflow: hidden;
   margin: 0px auto;
   width: 96%;
   border: 5px solid #d2d3d6;
   max-height:320px;
}

.colleft{
   position: relative;
   width: 100%;
   right: 30%;
}

.col1{
   position: relative;
   overflow: hidden;
   float: left;
   height:390px;
   left: 101%;
   background:url('../images/bg_rightt.jpg');
}

.col2{
   position: relative;
   overflow: hidden;
   float: left;
   width: 70%;
   height:390px;
   left: 1%;
   background-color: #f6f7f8;
}

和这个 html

  <div class="col2" style="border: 3px white solid;">
        <!-- Slider start -->
        <div class="slider-wrapper theme-default">

        <div id="slider" class="nivoSlider" style="width:100%; height:320px;">

            <img src="sliderimg/nivo1.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 1" />

            <img src="sliderimg/nivo2.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 2" />

            <img src="sliderimg/nivo3.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 3" />

            <img src="sliderimg/nivo4.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 4" />

            <img src="sliderimg/nivo5.jpg" data-thumb="" alt="" title="Aici se adauga text despre imaginea 5" />

       </div>

     </div>