1 Тема від Q-bart

  • Q-bart
  • Q-bart
  • Хочу бути модератором, щоб такі штуки ставити
  • Поза форумом
  • Звідки: Центр інтернету
  • Дата реєстрації: 14.06.2014
  • Повідомлень: 1 725
    • Репутація: 717

Тема: Позиціонування кнопки

Вітаю!
Виникла така проблемка:
Потрібно розташувати кнопку з нижнього правого боку div`a.

<div class="library-item">
        <img src="images/logo1.png" %}" alt=""/>
       <h4>Title Lorem ipsum dolor sit</h4>
        <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
        </p>
     <div class="library-button">
           <a class="btn btn-primary btn-lg">Скачати</a>
      </div>
</div>
.library-item {
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.library-button a {
    position: absolute;
    right: 30px;
    bottom: 15px;
}

А виходить так:
http://i.imgur.com/QM8SwoK.png

2 Відповідь від Анатолій Востаннє редагувалося Анатолій (12.12.2015 09:07:34)

  • Дата реєстрації: 14.05.2014
  • Повідомлень: 894
    • Репутація: 275

Re: Позиціонування кнопки

якщо кнопка з абсолютним позиціюванням, то звісно вона буде поверх попереднього div-a, і якщо справді потрібно , щоб позиціонування кнопки такі залишилось absolute, то тоді можливий варіант в нижньому div з position: relative зробити відступи знизу на висоту кнопки, padding: top px right px bottom(ocь тут і вказуємо висоту відступів для кнопки) px left px;

.library-item {
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px 10px 30px 10px;
    position: relative;
}
 
.library-button a {
    position: absolute;
    right: 30px;
    bottom: 15px;
}
Подякували: Q-bart1

Анатолій вебсайт

3 Відповідь від Q-bart

  • Q-bart
  • Q-bart
  • Хочу бути модератором, щоб такі штуки ставити
  • Поза форумом
  • Звідки: Центр інтернету
  • Дата реєстрації: 14.06.2014
  • Повідомлень: 1 725
    • Репутація: 717

Re: Позиціонування кнопки

Анатолій написав:

якщо кнопка з абсолютним позиціюванням, то звісно вона буде поверх попереднього div-a, і якщо справді потрібно , щоб позиціонування кнопки такі залишилось absolute, то тоді можливий варіант в нижньому div з position: relative зробити відступи знизу на висоту кнопки, padding: top px right px bottom(ocь тут і вказуємо висоту відступів для кнопки) px left px;

.library-item {
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px 10px 30px 10px;
    position: relative;
}
 
.library-button a {
    position: absolute;
    right: 30px;
    bottom: 15px;
}

Дякую, так дійсно працює.
Але можете ще пояснити? Я спеціально встановив верхньому div: position:relative , а кнопці - абсолютне, тому що думав, що для того щоб позиціонувати один елемент відносно іншого, то треба одному relative, а іншому absolute. Можна це зробити інакше?

4 Відповідь від Анатолій

  • Дата реєстрації: 14.05.2014
  • Повідомлень: 894
    • Репутація: 275

Re: Позиціонування кнопки

звісно можна й інакше, наприклад, два position: relative
тоді кнопка відразу автоматично буде йти за попереднім div-ом;

звісно Ви знаєте, що div має блокову характеристику, блок він і є блок. Саме блоки можуть йти один за одним, якщо relative, чи, наприклад, якщо float:left то один за одним, але якщо є вільне місце зліва (так як ширина блоків може бути різна)
Справа в тому що кожен елемент  дизайну потрібно бачити вцілому, як краще реалізовувати.

Якщо ж розглядати Ваш варіант, то зрозуміло, що кнопка з позицією position:absolute буде завжди позиціонуватись відносно блока в якому блоці він розміщений library-item із style {position:relative}

Я так гадаю, це досить хороший варіант, ніколи кнопка не "вилізе/залізе" на текст батьківського блоку, звісно якщо позиціонувати від низу bottom, думаю зрозуміло чому - так як у нас чітко прописані відступи знизу padding-bottom фіксовано скажімо тих 30px....

Загалом попередньо десь так...

Подякували: Q-bart1

Анатолій вебсайт

5 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Позиціонування кнопки

а для чого взагалі абсолют?

6 Відповідь від Key

  • Key
  • Key
  • Користувач
  • Поза форумом
  • Звідки: Lviv
  • Дата реєстрації: 27.12.2013
  • Повідомлень: 125
    • Репутація: 85

Re: Позиціонування кнопки

<div class="library-item">
        <img src="images/logo1.png alt=""/>
        <div>
       <h4>Title Lorem ipsum dolor sit</h4>
        <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
        </p>
        </div>
           <a class="btn btn-primary btn-lg">Скачати</a>
</div>

css

.library-item {
    background-color: #f5f5f5;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}
 
 a {
  float:right
}