Выравнивание положения липкой в правом нижнем углу не работает

Мне нужно, чтобы эта кнопка была в правом нижнем углу экрана, но, как вы видите, что-то не так с моим кодом. Что мне не хватает?

Вы можете помочь? Спасибо.

html {
  background: #ccc;
}

.chat {
  width: 55px;
  height: 55px;
  position: sticky;
  bottom: 20px;
  right: 20px;
  background: red;
  border: 0;
}

<button class = "chat"></button>

css position alignment sticky

05.05.2022 13:42

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это:

.chat {
 width: 55px;
 height: 55px;
 position: fixed;
 bottom: 20px;
 left: 20px;
 background: red;
 border: 0;
 }

position: fixed — это ключевой элемент.

05.05.2022 13:53

Другие вопросы по теме

Как разместить заголовок легенды над горизонтальной легендой

Сбросить положение просмотра, андроид

Позиция: абсолютная; Внизу: 0; Справа: 0; элемент перемещается, когда родительский div становится прокручиваемым с помощью overflow:auto;

Всплывающее окно продолжает менять свое положение сверху в ext js

Установка размера и положения ImageView в процентах программно в ConstraintLayout (Android)

Позиционирование нескольких Div с помощью Flex

Как я могу расположить 1 изображение относительно другого в ZStack в SwiftUI?

Как разместить абзац справа от блока изображений?

Определите расположение окна WPF таким образом, чтобы оно все время было видно в пределах экрана (например, контекстное меню правой кнопки мыши в ОС)

Попытка изменить положение виджета TradingView

Выравнивание положения липкой в ​​правом нижнем углу не работает

Ответы 1

Другие вопросы по теме

Похожие вопросы

Выравнивание положения липкой в правом нижнем углу не работает