9分16秒，設(shè)置幻燈片樣式后h3從一行變成兩行，另外圖片不顯示，這是哪里出問題了呀？
修改（設(shè)置position: absolute）的片段：
.slider?.main?.main-i{
???opacity:?0;
???position:?absolute;
???right:?50%;
???top:?0;
}然后修改之前的截圖：
修改之后的截圖：
這是為什么呢，我找了對比了很久，也沒發(fā)現(xiàn)控制臺那邊有什么區(qū)別呀？
求大神們指點(diǎn)一下，感激不盡！
另附完整html代碼：
<!DOCTYPE?html>
<html>
<head>
???<meta?charset="UTF-8">
???<title>Preview?Slideshow</title>
???<style>
??????*?{
?????????padding:?0;
?????????margin:?0;
??????}
??????body?{
?????????padding:?50px?0;
?????????background-color:?#FFF;
?????????font-size:?14px;
?????????font-family:?'Avenir?Next';
?????????color:?#555;
?????????-webkit-font-smoothing:?antialiased;?/*字體抗鋸齒*/
??????}
??????.slider?.main.main-i,
??????.slider?.main,
??????.slider{
?????????width:?100%;
?????????height:?400px;
?????????position:?relative;
??????}
??????/*幻燈片區(qū)域*/
??????.slider?.main{
?????????overflow:?hidden;
??????}
??????/*每一個幻燈片樣式*/
??????.slider?.main.main-i{}
??????.slider?.main?.main-i?img{
?????????width:?100%;
?????????position:?absolute;
?????????left:?0;
?????????top:?0;
?????????z-index:?1;
??????}
??????.slider?.main?.main-i?.caption{
?????????position:?absolute;
?????????right:?50%;
?????????top:?30%;
?????????z-index:?9;
??????}
??????.slider?.main?.main-i?.caption?h2{
?????????font-size:?40px;
?????????line-height:?50px;
?????????color:?#B5B5B5;
?????????text-align:?right;
??????}
??????.slider?.main?.main-i?.caption?h3{
?????????font-size:?70px;
?????????line-height:?70px;
?????????color:?#000000;
?????????text-align:?right;
?????????font-family:?'Open?Sans?Condensed';
??????}
??????/*控制按鈕區(qū)域*/
??????.slider?.ctrl{
?????????width:?100%;
?????????height:?13px;
?????????line-height:?13px;
?????????text-align:?center;
?????????position:?absolute;
?????????left:?0;
?????????bottom:?-13px;
??????}
??????.slider?.ctrl?.ctrl-i{
?????????display:?inline-block;
?????????width:?150px;
?????????height:?13px;
?????????background:?#666;
?????????box-shadow:?0?1px?1px?rgba(0,0,0,.3);
?????????position:?relative;
?????????margin-left:?1px;
??????}
??????.slider?.ctrl?.ctrl-i?img{
?????????width:?100%;
?????????position:?absolute;
?????????left:?0;
?????????bottom:?50px;
?????????z-index:?1;
?????????opacity:?0;
?????????-webkit-transition:?all?.2s;????/*過渡動畫*/
??????}
??????/*hover到控制按鈕的樣式*/
??????.slider?.ctrl?.ctrl-i:hover{
?????????background-color:?#F0F0F0;
??????}
??????.slider?.ctrl?.ctrl-i:hover?img{
?????????bottom:?13px;
?????????-webkit-box-reflect:?below?0px?-webkit-gradient(
????????????linear,
????????????left?top,
????????????left?bottom,
????????????from(?transparent?),
????????????color-stop(?50%,?transparent?),
????????????to(?rgba(255,255,255,.3)?)
?????????);
?????????opacity:?1;
??????}
??????/*?active?當(dāng)前展現(xiàn)的狀態(tài)*/
??????.slider?.ctrl?.ctrl-i_active:hover,
??????.slider?.ctrl?.ctrl-i_active{
?????????background-color:?#000;
??????}
??????.slider?.ctrl?.ctrl-i_active:hover?img{
?????????opacity:?0;
??????}
??????/*?幻燈片切換的樣式?*/
??????.slider?.main?.main-i{
?????????opacity:?0;
?????????position:?absolute;
?????????right:?50%;
?????????top:?0;
??????}
??????.slider?.main?.main-i_active{
?????????opacity:?1;
?????????/*right:?0;*/
??????}
???</style>
</head>
<body>
???<div?class="slider">
??????<div?class="main">
?????????<div?class="main-i?main-i_active">
?????????????<div??class="caption">
???????????????<h2>h2?caption</h2>
???????????????<h3>h3?caption</h3>
????????????</div>
?????????????<img?src="imgs/{{index}}.jpg"/>
??????????</div><div?class="main-i">
?????????<div??class="caption">
????????????<h2>h2?caption2</h2>
????????????<h3>h3?caption</h3>
?????????</div>
?????????<img?src="imgs/{{index}}.jpg"/>
??????</div>
??????</div>
??????<div?class="ctrl">
??????????<a?class="ctrl-i?ctrl-i_active"?href="javascript:;">
????????????<img?src="imgs/{{index}}.jpg"/>
?????????</a><a?class="ctrl-i"?href="javascript:;">
????????????<img?src="imgs/{{index}}.jpg"/>
?????????</a>
???????</div>
???</div>
</body>
</html>
2016-06-10
將position:?absolute改成relative后，網(wǎng)頁效果和視頻上的一致。
.slider?.main?.main-i{ ???opacity:?0; ???position:?absolute; ???right:?50%; ???top:?0; }又分析了一下，發(fā)現(xiàn)設(shè)置absolute時，img是相對于class=main-i main-i_active的div元素的，而main-i main-i_active內(nèi)又是設(shè)置absolute的，按我的理解是，這個div位置不變，img就不變，那為什么視頻內(nèi)卻是改變了呢？