The absolute location of css is squeezed out by the elements of width 100%.

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?

Jun.21,2021

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

just change the position, because the picture is laid first, so the > of right is squeezed out by img

.
.right{
    top:0;
    right:0
}

write the case of absolute positioning. Generally, it is more reliable to write left/right/top/bottom values manually. They all belong to different streams. In theory, there is no problem of crowding out.


since positioning should take into account the left and right buttons and image level: will the size of z-index


img affect the position of left or right? Left and right are out of the element stream and don't quite understand what you're saying


. The

absolute positioning element defaults to when it is not explicitly assigned a topleftrightbottom, where it is when it is a normal block-level element . It is recommended that you remove the rightvalue of the right div element first to make it more obvious.

The solution is to explicitly give any two values in the topleftrightbottom of the absolute element.


top: 0;

Menu