javascript - 我正在使用 bootstrap 创建幻灯片，但包含的第二个 div 比幻灯片 div 长

Question

为了使第二个 div 出现在幻灯片 div 上方，我将第二个 div 设置为 position:absolute。因为第一个 div 是幻灯片..所以我不能把第二个 div 放在第一个 div 里面。如何解决？

<div class="carousel slide">
  <div class="carousel-inner" style="height:1000px">
    <div class="item active">
      <div class="fill" style="background-image:url(picture.jpg);"></div>
    </div>
  </div>
</div>
<div>some form.....</div>

CSS

.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

这里是图片的外观示例 桌面 移动的

解决了!!....

Answer 1

我不是很清楚你的问题，但这里有一个使用标准 Bootstrap 标记的解决方案。

你的问题是你试图将表单标记放在轮播之后，如果你确实需要它重叠这不是答案请澄清你的问题，我会修改答案

如果这不是你要找的，请告诉我

$(document).ready(function() {
  //console.log('Ready!')

})

.carousel-inner .item {
  min-height: 80px;
 
}
#form_2 {
  position: relative;
  z-index: 1000;
  display: none;
}
.form-cont {
  background-color: rgba(255,255,255,.5);
  border:1px solid #ccc;
  height: 300px;
  width: 50%;
  position: absolute;
  z-index: 999;
  
  left: 25%;
  top:0;
  padding:10px;
}
.item img {
  min-height:300px;
}
.item.slide1 {
  background-color:red;
  }

.item.slide2 {
  background-color:lightblue;
  }

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="realtive">
  <div class="form-cont">



    <h4>Header</h4>
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>

      <button type="submit" class="btn btn-default">Send invitation</button>
    </form>
  </div>
</div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active slide1">
      <img src="/image/4hEOH.jpg" alt="...">
      <div class="carousel-caption">
        slide 1
      </div>
    </div>
    <div class="item slide2">
      <img src="/image/COO5g.jpg" alt="...">
      <div class="carousel-caption">
        slide 2
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>