фиксированное положение кнопки над изображением

Question

У меня проблема с моей страницей. Я поместил кнопку поверх изображения внутри прокручиваемого <div></div>, и это <div></div> находится внутри <td></td> таблицы. Кнопка на верхней части изображения имеет следующие стили CSS:

border:none; 
background-color:transparent; 
color:#FFF; 
z-index:101; 
top:2px; 
background-image:url(count.png); 
background-size:40px; 
width:40px; 
height:40px; 
padding:0 15px; 
font-size:16px; 
margin-left:-5px; 
cursor:pointer; 
position:absolute; 

Теперь проблема, когда я прокручиваю вниз, кнопка остается на той же позиции. Я хочу, когда я прокручиваю вниз кнопку, скрывается сверху вместе с изображением в том же положении. Как я могу это сделать? Любая помощь будет так высоко оценена.

jsFiddle: jsFiddle

Answer 1

Вопрос, который вы можете столкнуться что-то подобное позиционирование. Вы размещаете изображение position: relative на div, а не на изображение. Если вы оберните изображение в div, а затем установите положение, оно тоже будет расти.

Однако, это всего лишь вопрос, попробуйте использовать что-то вроде:

<div class="image-div> 
    <img src="src_to_file.png" alt="photo" /> 
    <button class="button">Button</button> 
</div> 

Вы можете использовать это в качестве CSS:

.image-div { 
position: relative; 
} 
.button { 
position: absolute; 
} 

Также убедитесь, что .image-div не является основной или один из родителей div, как будто это! Кнопка будет плавать над ним, но если div .image-div является дочерним, он будет скользить (прокручивать).