2016-07-17 4 views
0

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

По существу, я пытаюсь расположить кнопку под изображением, сохраняя его (кнопку) в центре и сохраняя его отзывчивым. Я долгое время читал вопрос в первый раз. Было бы с благодарностью воспринято любое введение, ведущее к решениям.

Возможно, мои девы отключены?

.randomImage { 
 
    position: fixed; 
 
    right: 0; 
 
    left: 0; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    height: auto; 
 
    width: auto; 
 
    top: 20%; 
 
} 
 
.btnGroup { 
 
    margin: 0 auto; 
 
    width: 20px; 
 
    color: red; 
 
    position: relative; 
 
} 
 
#buttonOne { 
 
    position: absolute; 
 
}
<div class="blackOverLay"> 
 

 
    <div class="imageContainer"> 
 
    <div class="imageHold"> 
 
     <image class="randomImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9dq_0kM7kPFwPJAzHSFNRThXKHmD1ryYDf78YrDNJX7IiExM3sA"> 
 
     </img> 
 
     <div class="btnGroup"> 
 
      <button id="buttonOne" onclick="closeThis()">CLOSE</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

+0

Что такое ' ' ?? Не совсем правильный HTML. Также, если вы исправили контейнер изображения, вы можете вставить кнопку в фиксированный контейнер. – mplungjan

+0

Спасибо mplungjan - вы правы, не верю, что я это написал. Исправлена. Оцените обратную связь! – knowledgealways

ответ

0

Если я вас понимаю, это то, что у хочу.

.randomImage { 
 
position: absolute; 
 

 
right: 0; 
 
left: 0; 
 
margin-right: auto; 
 
margin-left: auto; 
 

 
height: auto; 
 
width: auto; 
 
} 
 

 
.btnGroup { 
 
margin: 0 auto; 
 
width: 20px; 
 
color: red; 
 
} 
 

 
.imageContainer { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
} 
 

 
#buttonOne { 
 
position: absolute; 
 
bottom: 0 
 
}
<div class="blackOverLay"> 
 
    <div class="imageContainer"> 
 
     <div class="imageHold"> 
 
      <img class="randomImage" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ9dq_0kM7kPFwPJAzHSFNRThXKHmD1ryYDf78YrDNJX7IiExM3sA" /> 
 
      <div class="btnGroup"> 
 
       <button id="buttonOne" onclick="closeThis()">CLOSE</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

+0

А, да! - Спасибо! Я устанавливаю значение «bottom» на%, хотя для отзывчивости. И, похоже, это трюк. Очень признателен. Кажется, мне не хватает css для imageContainer. Live'n'learn/* embarassment * в то же время. = D – knowledgealways

Смежные вопросы