придерживаться одного изображения поверх другого

Question

У меня есть структура, как показано ниже:

.a { 
 
    display: block; 
 
    height: auto; 
 
    left: 11px; 
 
    top: 89.3px; 
 
    width: auto; 
 
    position: absolute; 
 
} 
 
.a img { 
 
    display: block; 
 
    height: auto; 
 
    width: 100%; 
 
} 
 
.b1 { 
 
    position: absolute; 
 
} 
 
.prev { 
 
    background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important; 
 
    border: medium none !important; 
 
    height: 25px; 
 
    left: -807px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute !important; 
 
    top: -220px; 
 
    width: 25px; 
 
} 
 
.prev span { 
 
    text-indent: -9999px; 
 
}

<div class="a"> 
 
    <div class="a1"> 
 
    <img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" /> 
 
    </div> 
 
    <div class="b"> 
 
    <div class="b1"> 
 
     <button class="prev"> 
 
     <span>previous</span> 
 
     </button> 
 
     <button class="nxt"> 
 
     <span>next</span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>

Теперь проблема, мне нужно фиксированные предыдущие и следующие кнопка изображений на моем shasta-daisy-3.jpg изображения. Для этого я использовал position: absolute для моих классов nxt и prev. Но когда я изменил размер окна, мое предыдущее изображение постоянно тянулось влево до тех пор, пока оно не исчезнет, ​​я не смогу привязать его к одному месту над изображением.

Answer 1

Вам нужно создать обертку с position: relative;.

Answer 2

Ваша проблема заключается в том, что вы не дали top и left значения в положение .b, так что это не реально получить Absolutly позиционируется просто говоря: position: absolute. Вы должны добавить: top:0; left:0 (или справа, снизу), поэтому он получает только над изображением, например:

.a { 
 
    display: block; 
 
    height: auto; 
 
    left: 11px; 
 
    top: 89.3px; 
 
    width: auto; 
 
    position: absolute; 
 
} 
 
.a img { 
 
    display: block; 
 
    height: auto; 
 
    width: 100%; 
 
} 
 
.b1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.prev { 
 
    background: rgba(0, 0, 0, 0) url("http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png") no-repeat scroll 0 0 !important; 
 
    border: medium none !important; 
 
    height: 25px; 
 
    left: ; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute !important; 
 
    top: 0; 
 
    width: 25px; 
 
} 
 
.prev span { 
 
    text-indent: -9999px; 
 
}

<div class="a"> 
 
    <div class="a1"> 
 
    <img src="http://s.hswstatic.com/gif/shasta-daisy-3.jpg" /> 
 
    </div> 
 
    <div class="b"> 
 
    <div class="b1"> 
 
     <button class="prev"> 
 
     <span>previous</span> 
 
     </button> 
 
     <button class="nxt"> 
 
     <span>next</span> 
 
     </button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Основной проблемой является ваш CSS
Здесь я создал JSFiddle и обновил свой CSS слегка:

.b { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 50%; 
    margin: auto; 
    width: 100%; 
    } 
.b1 > button { 
    background: rgba(0, 0, 0, 0) url(http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png) no-repeat scroll 0 0; 
    position: absolute; 
    top:0; 
    height:25px; 
    width:25px; 
    margin:0; 
    padding:0; 
    text-indent: -999px; 
    overflow: hidden; 
    border: none; 
    display: inline-block; 
    } 
.prev { 
    left: 0; 
} 
.nxt { 
    right: 0; 
} 

и это будет г ив выход как:

В этом положении следующей и предыдущая кнопки не изменится при изменении размеров окна браузера.
Надеюсь, он сработает для вас.