css绝对定位被width 100%的元素挤走

Question

容器内有三个元素：左右各有一个div position为absolute，中间一个img width：100%，发生问题：

html：

<section class="display">
    <div class="left"><</div>
    <img src="pic1.jpg" title="picture carousel" alt="none" />
    <div class="right">></div>
</section>

css：

.display,.dots{
    position: relative;
    width: 600px;
    top: 50%;
    left: 50%;
    margin: 0 0 0 -300px;
    text-align: center;
}
.display{
    border: 1px solid silver;
    height: 300px;
    margin: -150px 0 0 -300px;
}
.left,.right{
    display: inline-block;
    position: absolute;
    height: 100%;
    width: 100px;
    border: 1px solid steelblue;
    line-height: 300px;
    font-size: 3em;
    opacity: 0;
}
.left:hover,.right:hover{
    cursor: default;
    opacity: 0.5;
    background-color: #eee;
}
.left{
    left: 0;
}
.right{
    right: 0;
}
img{
    height: 100%;
    width: 100%;
}

当img的width是100%时，左边的div（覆盖在图片上的透明div）

右边的div：

当img的width是99%时，左边的div

右边的div：

第二张图片好像在说明，position：absolute的元素被width：100%的元素挤走了！
为什么会这样？

Answer 1

绝对定位元素在没有明确给它指定 topleftrightbottom 的情况下，默认会处于当它作为普通块级元素时所在的位置。 建议你把 right div元素的right值先拿掉，看的更明显。

解决方法就是明确给出absolute元素的 topleftrightbottom中的任意两项值。

Answer 2

<section class="display">
    <div class="left"><</div>
    <div class="right">></div>
    <img src="pic1.jpg" title="picture carousel" alt="none" />
</section>

换下位置就行了，因为先铺的是图片，所以right的>被img给挤走了

Answer 3

.right{
    top:0;
    right:0
}

写了绝对定位的情况，一般手动写好left/right/top/bottom值比较靠谱 它们都属于不同的流的按理来说不存在挤出去的问题

Answer 4

既然定位就要考虑到左右按钮和图片层级：z-index

Answer 5

img的大小会影响left或者right的位置吗？left和right已经脱离元素流了，不太明白你说的

Answer 6

top: 0;