将div放在旋转木马顶部

时间：2017-08-19 10:48:49

标签： javascript jquery html css

我有一个旋转木马，我想在它上面放一个静态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>

3 个答案:

答案 0 :(得分：2)

  

使用此css类。

     

border-radius：50％; [For Circle]

     

顶部：0; [拉到顶部。]

     

左：calc（50％ - 175px）; [这里175px，因为你的div宽度是350px，你的div长度的一半放在这里居中;]

     

背景：＃444; [用于检查，删除它。] 

.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>

答案 1 :(得分：1)

你需要做一些事情。

您需要设置top和left，因为它是绝对定位的元素。同时将项目的position设置为relative，以便圆圈绝对位于项目中。

然后使用transform: translate(-50%, -50%);将其置于item的中间位置。

请参阅下面的更新代码和演示。

 .item {
  position: relative;
}

.circle {
  background-color: #FFF;
  width: 150px;
  height: 150px;
  position: absolute;
  opacity: 0.8;
  border-radius: 100% ;
  background: red;
  background-size: 350px;
  background-repeat: no-repeat;
  margin: 0 auto;
  top:50%;
  left: 50%;
  transform: translate(-50% , -50% );
}
<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">

<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>

答案 2 :(得分：1)

将.circle div移到.carousel-inner之外，然后将其左移：0;右：0;将它居中并将z-index值设为16（点指示符为15）以在滑块上方渲染。

＆＃13;
＆＃13; 
.circle{
  width: 150px;
  height: 150px;
  position: absolute;
  opacity: 0.8;
  border-radius: 100%;
  background-color: red;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 16;
  }
＆＃13; 
<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">
  <div class="circle"></div>
  <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>
  <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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题