Держите Div внизу страницы с изображением справа

0

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

У меня есть следующая разметка со мной

<div id="message">
    <p>Some Message</p>
    <span class="shut">

    </span>
</div>

Я определил CSS следующим образом

#message{
    position:fixed;
    bottom:0;
    height:320px;
    width:310px;
    background: #453fefe;     
    padding: 10px 20px;             
    border-radius: 5px;
}

.shut {
    background: transparent url('shutig.png') 0 0 no-repeat;
    position: absolute;
    top: 4px;
    right: 4px;
}

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

Теги:

2 ответа

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

У вас неправильный цвет фона, что делает работу CSS неэффективной. Также кнопка закрытия не может быть отображена, потому что вы не задали для нее явный размер.

#message{
 position:fixed;
 bottom:0;
 right:0;
 height:120px;
 width:210px;
 background: #45fefe; /* you set #453fefe which is an invalid color */
 padding: 10px 20px;             
 border-radius: 5px;
}

.shut {
 background: transparent url('http://placehold.it/20x20') 0 0 no-repeat;    
 position: absolute;
 top: 4px;
 right: 4px;
 width:20px;
 height:20px;
}

Demo.

Поделиться
  • 1
    На самом деле вы король CSS. Спасибо за вашу помощь :)
  • 0
    @ user3279259 спасибо, но это не реально :)
Показать ещё 4 комментария
0

Не используйте абсолютное позиционирование для.shut, он будет позиционировать его относительно вашего экрана, а не родителя. Попробуйте поиграть с поплавком или использовать таблицу

Поделиться
  • 0
    На самом деле, абсолютное позиционирование работает против ближайшего расположенного родителя; поскольку непосредственный родитель является фиксированным позиционированием, абсолютное позиционирование относительно этого элемента. Вы можете увидеть это здесь: jsfiddle.net/KNjK3

Ещё вопросы

Сообщество Overcoder
Наверх
Меню