html - 如何将幻灯片指示器放在左上角

Question

我有一个基本的幻灯片，但我想将指示器放在幻灯片的左上角，但没有任何效果。

我试过边距、填充，甚至在网上和这里搜索了解决方案，但还是一无所获

代码:

.carousel{
	position:relative
}
.carousel-inner{
	position:relative;
	width:100%;
	height: 690px;
	overflow:hidden
}
.carousel-inner>.item{
	position:relative;
	display:none;
	-webkit-transition:.6s ease-in-out left;
	-o-transition:.6s ease-in-out left;
	transition:.6s ease-in-out left
}
.carousel-inner>.item>a>img,.carousel-inner>.item>img{
	line-height:1
}
@media all and (transform-3d),(-webkit-transform-3d){
	.carousel-inner>.item
	{
		-webkit-transition:-webkit-transform .6s ease-in-out;
		-o-transition:-o-transform .6s ease-in-out;
		transition:-webkit-transform .6s ease-in-out;
		transition:transform .6s ease-in-out;
		transition:transform .6s ease-in-out,-webkit-transform .6s ease-in-out,-o-transform .6s ease-in-out;
		-webkit-backface-visibility:hidden;
		backface-visibility:hidden;
		-webkit-perspective:1000px;
		perspective:1000px
	}
	.carousel-inner>.item.active.right,.carousel-inner>.item.next{
		-webkit-transform:translate3d(100%,0,0);
		transform:translate3d(100%,0,0);
		left:0
	}
	.carousel-inner>.item.active.left,.carousel-inner>.item.prev{
		-webkit-transform:translate3d(-100%,0,0);
		transform:translate3d(-100%,0,0);
		left:0
	}
	.carousel-inner>.item.active,.carousel-inner>.item.next.left,.carousel-inner>.item.prev.right{
		-webkit-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
		left:0
	}
}
.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{
	display:block
}
.carousel-inner>.active{
	left:0
}
.carousel-inner>.next,.carousel-inner>.prev{
	position:absolute;
	top:0;
	width:100%
}
.carousel-inner>.next{
	left:100%
}
.carousel-inner>.prev{
	left:-100%
}
.carousel-inner>.next.left,.carousel-inner>.prev.right{
	left:0
}
.carousel-inner>.active.left{
	left:-100%
}
.carousel-inner>.active.right{
	left:100%
}
.carousel-control{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:15%;
	font-size:20px;
	color:#fff;
	text-align:center;
	text-shadow:0 1px 2px rgba(0,0,0,.6);
	background-color:rgba(0,0,0,0);
	filter:alpha(opacity=50);
	opacity:.5
}
.carousel-control.left{
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));
	background-image:linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', 
		GradientType=1);
	background-repeat:repeat-x
}
.carousel-control.right{
	right:0;
	left:auto;
	background-image:-webkit-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image:-o-linear-gradient(left,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.0001)),to(rgba(0,0,0,.5)));
	background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0,0,0,.5) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', 
		GradientType=1);
	background-repeat:repeat-x
}
.carousel-control:focus,.carousel-control:hover{
	color:#fff;
	text-decoration:none;
	outline:0;
	filter:alpha(opacity=90);
	opacity:.9
}
.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next,.carousel-control .icon-prev{
	position:absolute;
	top:50%;
	z-index:5;
	display:inline-block;
	margin-top:-10px
}
.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{
	left:50%;
	margin-left:-10px
}
.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{
	right:50%;
	margin-right:-10px
}
.carousel-control .icon-next,.carousel-control .icon-prev{
	width:20px;
	height:20px;
	font-family:serif;
	line-height:1
}
.carousel-control .icon-prev:before{
	content:"\2039"
}
.carousel-control .icon-next:before{
	content:"\203a"
}
.carousel-indicators{
	position:absolute;
	bottom:10px;
	left:100px;
	z-index:15;
	width:60%;
	padding-left:0;
	margin-left:-30%;
	margin-top:-30%;
	text-align:center;
	list-style:none
}
.carousel-indicators li{
	display:inline-block;
	width:10px;
	height:10px;
	margin:1px;
	text-indent:-999px;
	cursor:pointer;
	background-color:#000\9;
	background-color:rgba(0,0,0,0);
	border:1px solid #fff;
	border-radius:10px
}
.carousel-indicators .active{
	margin-top: 250px;
	width:12px;
	height:12px;
	margin:0;
	background-color:#fff
}
.carousel-caption{
	position:absolute;
	right:15%;
	bottom:20px;
	left:15%;
	z-index:10;
	padding-top:20px;
	padding-bottom:20px;
	color:#fff;
	text-align:center;
	text-shadow:0 1px 2px rgba(0,0,0,.6)
}
.carousel-caption h3{
	float:left;
	margin-left:-350px;
	background-color:#fff;
	padding: 7px 20px 5px;
	color:#000
}
.carousel-caption .btn{
	text-shadow:none
}
.show{
	margin-top: 240px;
	width: 100%;
	border-bottom: none
}

<div class="container show">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <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>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="images/46e3dd55b6cc4f1df004cabd85cbaac6fc8e1218.jpg" alt="Los Angeles" style="width:100%;">
        <div class="carousel-caption">
          <h3>Los Angeles</h3>
        </div>
      </div>

      <div class="item">
        <img src="images/black.jpg" alt="Chicago" style="width:100%;">
        <div class="carousel-caption">
          <h3>Chicago</h3>
        </div>
      </div>
    
      <div class="item">
        <img src="images/46e3dd55b6cc4f1df004cabd85cbaac6fc8e1218.jpg" alt="New York" style="width:100%;">
        <div class="carousel-caption">
          <h3>New York</h3>
        </div>
      </div>
    </div>
</div>

这里有一个截图供引用: https://imgur.com/ASIUh0i

感谢任何帮助并提前致谢

Answer 1

尝试替换这个:

我们正在取消设置底部位置，将顶部位置设置为 10px，然后删除 margin-top: 样式。

    .carousel-indicators{
        position:absolute;
        bottom:10px;
        left:100px;
        z-index:15;
        width:60%;
        padding-left:0;
        margin-left:-30%;
        margin-top:-30%;
        text-align:center;
        list-style:none
    }

有了这个

    .carousel-indicators{
        position:absolute;
        bottom:unset;
        top: 10px;
        left:100px;
        z-index:15;
        width:60%;
        padding-left:0;
        margin-left:-30%;
        text-align:center;
        list-style:none
    }

例子可以在这里找到:

https://codepen.io/CTBroon/pen/xxKOreE