ポジションの絶対値。フォーストップ：0

Question

私はカルーセル用画像選択実装しています：

は、構造は以下の通りです：

• シェブロンのための場所を余裕がある水平パディングと<div>コンテナ。
で左側のシェブロンのため
• <div：white-space: nowrap; overflow:hidden

問題で画像を格納するため<div>position : absolute; right:0;

：でposition : absolute; left:0;右側のシェブロンのため

<div Iドンの場合

：山形の「トン力top:0、私はこの結果を得ます

誰かが理由を説明できますか？ここで

はJSFiddle

HTMLです：

<div class="container"> 
    <div class="img-container"> 
     <ul> 
      <li><img src="http://placehold.it/150x100/EEE04A/ffffff?text=Image%201"> 
      </li><li><img src="http://placehold.it/150x100/5cb85c/ffffff?text=Image%202"> 
     </li><li><img src="http://placehold.it/150x100/5bc0de/ffffff?text=Image%203"> 
     </li><li><img src="http://placehold.it/150x100/f0ad4e/ffffff?text=Image%204"> 
     </li><li><img src="http://placehold.it/150x100/FF3167/ffffff?text=Image%205"></li> 
     </ul> 
    </div> 
    <div class="button-left"> 
     <img src="http://placehold.it/50x100/cccccc/ffffff?text=<"> 
    </div> 
    <div class="button-right"> 
     <img src="http://placehold.it/50x100/cccccc/ffffff?text=>"> 
    </div> 
</div> 

CSS：

ul { 
    padding-left: 0; 
    margin: 0; 
    list-style:none; 
} 

.container { 
    width: 450px; 
    padding: 0 50px 0 50px; 
    position: relative; 
} 

.img-container { 
    overflow:hidden; 
    white-space: nowrap; 
} 

.img-container li { 
    display:inline-block; 
} 

.button-left { 
    position: absolute; 
    left: 0; 
    /* top: 0; */ 
} 

.button-right { 
    position: absolute; 
    right: 0; 
    /* top: 0; */ 
} 

Answer 1

を与えますそれらの下に、矢印）。これを絶対的な位置付けで修正することができますが、最初に同じ水平行にそれらを保持するほうがはるかにクリーンであると思います。 floatを使用した単純な例では、メイン `.container`と` ul`にflex`：

JSFiddle

Answer 2

に設定された（ '相対' 要素を必要としない

絶対位置.box要素）。位置決めコンテキストなしで絶対的に要素を配置すると、位置決めはページ全体に対して行われます。 （ただし、top、bottom、left、rightのいずれの値も指定しない場合は例外です。この場合、位置指定コンテキストがなくても、コンテキストは自動的に直近のコンテナ要素になり、要素はそのまま残りますフロー）

したがって、position: absoluteでいくつかの要素の上または左の位置を指定しない場合、DOMの通常の位置に従ってこれらの位置が考慮されます。あなたの場合も同じですが、彼らはDOMの通常の位置からトップポジションを取っています。 絶対位置の要素を配置するには、ほとんどの場合問題を避けるためにこれらのプロパティを明示的に指定する必要があります。

Answer 3

あなたは、私は他の答えはあなたがコンテンツの積層された2つの行（スライドを持っているということです本当の問題、周りのスカートだと思いIMG-コンテナにposition:absolute;とwidth:450px;

ul { 
 
    padding-left: 0; 
 
    margin: 0; 
 
    list-style:none; 
 
} 
 

 
.container { 
 
    width: 450px; 
 
    padding: 0 50px 0 50px; 
 
    position: relative; 
 
    
 
} 
 

 
.img-container { 
 
    overflow:hidden; 
 
    white-space: nowrap; 
 
    position: absolute; 
 
    width: 450px; 
 
} 
 

 
.img-container li { 
 
    display:inline-block; 
 
} 
 

 
.button-left { 
 
    position: absolute; 
 
    left: 0; 
 
    /* top: 0; */ 
 
} 
 

 
.button-right { 
 
    position: absolute; 
 
    right: 0; 
 
    /* top: 0; */ 
 
}

<div class="container"> 
 
    <div class="img-container"> 
 
    <ul> 
 
     <li><img src="http://placehold.it/150x100/EEE04A/ffffff?text=Image%201"> 
 
     </li><li><img src="http://placehold.it/150x100/5cb85c/ffffff?text=Image%202"> 
 
     </li><li><img src="http://placehold.it/150x100/5bc0de/ffffff?text=Image%203"> 
 
     </li><li><img src="http://placehold.it/150x100/f0ad4e/ffffff?text=Image%204"> 
 
     </li><li><img src="http://placehold.it/150x100/FF3167/ffffff?text=Image%205"></li> 
 
    </ul> 
 
    </div> 
 
    <div class="button-left"> 
 
    <img src="http://placehold.it/50x100/cccccc/ffffff?text=<"> 
 
    </div> 
 
    <div class="button-right"> 
 
    <img src="http://placehold.it/50x100/cccccc/ffffff?text=>"> 
 
    </div> 
 
</div>