CSS - относительное оставление места, где оно должно быть на самом деле

0

Я помещаю шоу более предупреждающую кнопку. тип отображения типа дисплея показывает фактическое пространство, если я перемещаюсь выше, используя правый/верхний/нижний/левый

Как я могу удалить относительное пространство пространства на месте, без установки высоты родительского элемента.

проверьте скрипт на основе.

HTML

<div class="alert-list">
    <div class="alert-error">Plase update your system with new release</div>
    <div class="alert-notify">New Release are ready for download verify with hash</div>
    <div class="alert-error">System is not actived. Please activce first for full access</div>
    <div class="alert-error">System is not actived. Please activce first for full access</div>
    <button class="bnt-show-alerts">show more</button>
</div>

CSS

.alert-list {
    width:400px;
    background-color:#E9E9E9;
    padding:3px;
    /*height: auto; automaticly arrange*/
}
.alert-error {
    background-color:rgba(255, 0, 0, 0.2);
    margin:2px;
}
.alert-notify {
    background-color:rgba(0, 255, 0, 0.2);
    margin:2px;
}
.bnt-show-alerts {
    position:relative;
    right:-310px;
    bottom:30px;
    opacity:0.5;
}
.bnt-show-alerts:hover {
    opacity:1.0;
} 
  • 0
    Нет, вставьте код скрипты здесь.
  • 0
    Вот какая position: relative; делает, он оставляет место в потоке документов, где он был изначально. Если вы не хотите этого, вы, вероятно, ищете position: absolute;
Показать ещё 2 комментария
Теги:
layout
relative

1 ответ

0
Лучший ответ

Когда вы используете relative положение, используя right/top/bottom/left кнопка перемещается из ее статического положения, оставляя ее фактическое пространство пустым. Если вы хотите переместить кнопку из своего фактического пространства без пустого пространства элемента, используйте absolute позиционирование, чтобы поместить элемент. Подробнее о размещении здесь

скрипка

Изменения CSS

.alert-list {
    position:relative;
}

.bnt-show-alerts {
    position:absolute;
    right:0;
    bottom:5px;
    opacity:0.5;
}
  • 0
    : Спасибо получил мое решение
  • 1
    Нажмите «Принять» (под значком голосования вверх / вниз), если он отвечает на ваш вопрос.
Показать ещё 1 комментарий
Сообщество Overcoder
Наверх
Меню