Как сделать div с кнопкой и закрепить в низу страницы?

Question

[Максим]

Помогите решить проблему с блоком div мне нужно закрепить блок внизу страницы что бы данный блок был с кнопкой закрытия!Блок сделать могу,отцентровать могу, кнопку ставлю, но то блок сьезжает, то кнопка перестаёт отвечать!

Answer 1

[Владислав Бойченко]

codepen.io/anon/pen/KamQEy

Comments

[Максим]

Всё супер!Братанчик подскажи только JS где подключить чтобы кнопка работала!?

[Сергей Горячев]

Максим: Там, где и остальные скрипты JS. Обычно это делается в отднльном файле.

[Максим]

##

[Максим]

Sergey Goryachev: Это понятно!Но не работает через HEAD

[Сергей Горячев]

Максим: А библиотеку jQuery ты подключил?

[Максим]

Sergey Goryachev: да!

[Сергей Горячев]

Максим: Ну, если у тебя все нормально сделано, оно должно работать, хоть черех head, хоть через отдельный файл. Смотри консоль разработчика, ищи ошибку. Или на битву экстрасенсов, так хз, где ты неправильно делаешь)

[Максим]

Sergey Goryachev: floomby.ru/s2/RgbygX Ставил и до и после!

[Сергей Горячев]

Максим: Консоль смотри и ищи ошибку там.

[Максим]

Sergey Goryachev: Решил проблему! На WP

[Максим]

Sergey Goryachev: таким образом floomby.ru/s2/3gbyqw почему тут коды не вставляются?

[Максим]

Sergey Goryachev: Огромное спасибо!

[Владислав Бойченко]

Максим: если все работает, вы всегда можете отметить мой ответ решением)

[Максим]

Владислав Бойченко: Тебе огромное спасибо за наводку и подсказку!

Answer 2

[Nikola24]

Надо что бы он был прикрепленный к скроллу или просто как обычный div?

Comments

[Максим]

Да прикреплённый, фиксированный!

[Максим]

Я делал так только позиционирование другое:


Какой-то контент



CSS:
.pop-block {
display: inline-block;
position: relative; /* указывать обязательно */
width: 30%;
height: 300px; /* высота всего блока */
margin: 1%;
}
.close-block {
display: block;
position: absolute;
top: 8px;
right: -8px;
width: 16px;
height: 16px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAElBMVEXqAAD8oaH/AAD/ra3/vr7///91+I/7AAAAQklEQVR42oXPwQoAIAgD0JXu/385FfTQgnYweKAp9pUXmE+swAFWAG8owQBTqjQQ8SQOcAdRQVtkqHy7dDFd/X/tAVqqAopyUfkOAAAAAElFTkSuQmCC);
cursor: pointer;
}
.pop-block p {
width: 100%;
height: auto;
}

[Максим]

Какой-то контент

[Максим]

Блок div не отображается!Но он не столь важен я думаю проблема в стилях!

[Nikola24]

Попробуй position: fixed bottom: 0

[Максим]

Nikola24: не работает!Получается что кнопка закрытия в топ а сам блок уходит далеко за футер!

[Nikola24]

Максим: Ну внизу уже подсказали то что я имел ввиду

[Максим]

Nikola24: работает!Только я не отдупляю куда js подключить что бы кнопка работала!