在转盘上放置div

Question

I have a carousel and i want to put a static div on top of it with the carousel sliding behind it, but the div won't appear and i want it to be centered, the static div is a circle with an image inside it, here is my code:

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

Answer 2

You need to do a few things.

You need to set top and left as it is an absolutely positioned element. Also set the position of item to relative so the circle is positioned absolutely within the item.

Then use transform: translate(-50%, -50%); to center this in the middle of the item .

see updated code and demo below.

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

Answer 3

Move the .circle div outside of the .carousel-inner and then give it left:0; right:0; to center it and a z-index value of 16 (the dot indicators are 15) to render above the slider.

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

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