Position absolute. Force top : 0 - css

Question

I am implementing an image selector for a carousel :
The structure is the following :
A <div> container with some horizontal padding to spare place for the chevrons.
A <div for the chevron on the left with: position : absolute; left:0;
A <div for the chevron on the right with: position : absolute; right:0;
a <div> to contain the images with white-space: nowrap; overflow:hidden
Problem : If I don't force top:0 on the chevrons, I get this result :
Can someone explain why?
Here is the 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

I think the other answers skirt around the real issue, which is that you have two stacked rows of content (the slides and, below them, the arrows). You could fix this with absolute positioning but I think it'd be much cleaner to just keep them in the same horizontal row to begin with. A simple example using float:
JSFiddle

Answer 2

Absolute positioning doesn’t require a ‘relative’ element (as set on the .box element above). If you absolutely position an element without a positioning context, then the positioning will take place relative to the entire page. (The exception is if you don’t specify any top, bottom, left, or right values. In that case, even if there is no positioning context, the context will automatically become the immediate container element, and the element will still be in flow.)
So if you don't specify top or left position for some element with position: absolute they consider these position according to their normal position in DOM. Same is in your case they are taking top position from their normal position in DOM.
To place an element with position absolute we should provide these properties explicitly in most cases to avoid problems.

Answer 3

You give the img-container position:absolute; and 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>