there are three elements in the container: there is a div position on the left and right for the absolute, and a problem occurs in the middle of the 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: -sharpeee;
}
.left{
    left: 0;
}
.right{
    right: 0;
}
img{
    height: 100%;
    width: 100%;
}

when the width of img is 100%, the div on the left (the transparent div overlaid on the picture)

div:

imgwidth99%div

div:

the second picture seems to show that the element of position:absolute is squeezed out by the element of width:100%!
Why is this happening?