絕對位置。力頂部：0

的結構如下：

一些水平填充甲<div>容器騰出地方的人字形。左
一個<div爲雪佛龍在與：position : absolute; left:0;
一個<div用於人字形右邊有：position : absolute; right:0;
一個<div>包含具有white-space: nowrap; overflow:hidden

問題的圖像：如果我不我得到這個結果：

有人可以解釋爲什麼嗎？

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; */ 
}

來源

2016-04-15 Arnaud Denoyelle

甲CSS3替代方案將是適用'顯示：flex'到主'.container'和'ul'。不需要絕對定位或內聯塊。 –

@Michael_B這很整齊。因爲它阻止內容在頁面不夠大時進入下一行，所以它更好。 –

您可以在這裏瞭解更多關於flexbox的信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

我覺得其他的答案周圍的真實問題，這是你有兩個內容堆疊的行（幻燈片裙在它們的下面，箭頭）。你可以用絕對定位來解決這個問題，但我認爲將它們放在同一水平行開始時會更清潔。使用float一個簡單的例子：

JSFiddle

來源

2016-04-15 13:24:42 colonelsanders

絕對定位不需要 '相對' 元件（如所設定的上面的.box元素）。如果您絕對定位沒有定位上下文的元素，則定位將發生在整個頁面上。（例外情況是，如果不指定任何頂部，底部，左側或右側的值，那麼即使沒有定位上下文，上下文也會自動成爲直接的容器元素，並且元素仍然處於流程）。

因此，如果您不指定頂部或左側位置的某些元素與position: absolute他們認爲這些位置根據其在DOM中的正常位置。在你的情況下，他們在DOM中正常位置處於最高位置。要放置絕對位置的元素，我們應該在大多數情況下明確提供這些屬性以避免問題。

來源

2016-04-15 12:57:47

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

來源

2016-04-15 13:04:47 DanyCode

絕對位置。力頂部：0

回答

相關問題