javascript - 在旋转木马顶部放置一个 div

Question

我有一个旋转木马，我想在它上面放一个静态 div，旋转木马在它后面滑动，但是 div 不会出现，我希望它居中，静态 div 是一个带有图像的圆圈在里面，这是我的代码:

.circle{
  background-color: #FFF;
  width: 350px;
  height: 350px;
  position: absolute;
  opacity: 0.8;
  border-radius: 100%;
  background-image: url('http://via.placeholder.com/50x50');
  background-size: 350px;
  background-repeat: no-repeat;
  background-position: 50%;
  margin: 0 auto;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">

<!-- 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 id="mycarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li  data-target="#mycarousel" data-slide-to="0" class="active"></li>
    <li  data-target="#mycarousel" data-slide-to="1"></li>
    <li  data-target="#mycarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img  src="http://via.placeholder.com/510x150">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/510x150">
    </div>

    <div class="item">
      <img  src="http://via.placeholder.com/510x150">
    </div>
    <div class="circle">
    </div>

  </div>
  <a class="left carousel-control" href="#mycarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#mycarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

Answer 1

use this css class.

border-radius: 50%; [For Circle]

top: 0; [to pull to top.]

left: calc (50% - 175px); [here 175px because your div width is 350px put half of your div length here to make centered;]

background: #444; [is for checking, remove it.]

.circle{
  background-color: #FFF;
  width: 350px;
  height: 350px;
  position: absolute;
  opacity: 0.8;
  border-radius: 50%;
  background-image: url('http://via.placeholder.com/50x50');
  background-size: 350px;
  background-repeat: no-repeat;
  background-position: 50%;
  
    top: 0;
    left: calc(50% - 175px);
    background: #444;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">

<!-- 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 id="mycarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li  data-target="#mycarousel" data-slide-to="0" class="active"></li>
    <li  data-target="#mycarousel" data-slide-to="1"></li>
    <li  data-target="#mycarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img  src="http://via.placeholder.com/510x150">
    </div>
    <div class="item">
      <img src="http://via.placeholder.com/510x150">
    </div>

    <div class="item">
      <img  src="http://via.placeholder.com/510x150">
    </div>
    <div class="circle">
    </div>

  </div>
  <a class="left carousel-control" href="#mycarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#mycarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>

</div>