Question

我正在编写一个简单的目标网页。从理论上讲，您编码的每个div都将显示在前一个div之下，依此类推。

我做了一个小导航栏，然后预计滑块会出现在它下面。然后，我想在滑块下面添加一个图像（带有品牌＆＃39;徽标的图像）。问题是，图像显示在导航栏下方。我猜测滑块的位置有一些东西，但我无法弄清楚它是什么。

我宁愿不使用position: absolute或position: relative来定位我的所有元素，所以我在这里了解问题可能是什么。

＆＃13;

html {
  font-family: "Arial", Helvetica, sans-serif;
}


/*---navigation--*/

.top-nav {
  height: 105px;
  display: flex;
  align-items: center;
}

ul.main-nav {
  display: flex;
  align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  height: 40px;
}

ul.main-nav li {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  color: #FCAF17;
}

ul.main-nav li:hover {
  cursor: pointer;
  color: #FFFFFF;
}


/* main slider */

.slider {
  width: 100%;
  height: 100%;
  left: 0;
  top: 25%;
  opacity: 1;
  z-index: 0;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-flow: row wrap;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* image slider position */

.slide1 {
  position: absolute;
  left: 0;
}

.slide2 {
  position: absolute;
  left: 100%;
}

.slide3 {
  position: absolute;
  left: 200%;
}


/* slider pagination */

.slider-pagination {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}

.slider-pagination label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 2px;
  border: solid 1px rgba(255, 255, 255, 0.4);
  cursor: pointer;
}


/* slider control */

input {
  visibility: hidden;
}

.slide-radio1:checked~.slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.slide-radio2:checked~.slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.slide-radio3:checked~.slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}


/*----------slider end----------------*/

.box {
  background-color: blue;
}

＆＃13;

<!--navigation-->

<div class="top-nav">
  <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/logo.jpg"></img>
</div>

<ul class="main-nav">
  <li>HOMBRE</li>
  <li>MUJER</li>
  <li>NIÑOS</li>
  <li>Carrito</li>
</ul>

<!--image slider-->

<div class="css-slider-wrapper">

  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">


  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
  </div>

  <div class="slider slide1">
    <div>
      <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
    </div>
  </div>
  <div class="slider slide2">
    <div>
      <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
    </div>
  </div>
  <div class="slider slide3">
    <div>
      <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
    </div>
  </div>
</div>


<div class="brands">
  <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/marcas.jpg">
</div>

＆＃13;

Live demo

Answer 1

首先，您可以添加Position : relative，然后向div添加高度，例如我添加了<div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>

<div class="css-slider-wrapper">
    <div class="demo" style="opacity:0;"> <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg"> </div>

     <input name="slider" class="slide-radio1" checked="" id="slider_1" type="radio">
    <input name="slider" class="slide-radio2" id="slider_2" type="radio">
    <input name="slider" class="slide-radio3" id="slider_3" type="radio">


    <div class="slider-pagination">
      <label for="slider_1" class="page1"></label>
      <label for="slider_2" class="page2"></label>
      <label for="slider_3" class="page3"></label>
</div>

    <div class="slider slide1">
        <div>
            <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
        </div>
    </div>
    <div class="slider slide2">
        <div>
            <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/evoACCURACY_980x400px.jpg">
        </div>
    </div>
    <div class="slider slide3">
        <div>
            <img src="http://remote.fizzmod.com/ibNZlyN7LX319Mlx/frontend/images/racing-980x400.jpg">
        </div>
      </div>
</div>

使用风格：

.css-slider-wrapper {
    position: relative;
}
.slide1 {
left: 0;
}

尝试它我的工作其他给我演示行https://jsfiddle.net/

CSS图像滑块覆盖元素

1 个答案: