CSS для сохранения элемента в фиксированной позиции на экране

Я ищу трюк для создания "фиксированного" объекта HTML на экране браузера с помощью CSS. Я хочу, чтобы он оставался в одной и той же позиции все время, даже когда пользователь прокручивает документ. Я не уверен, каков правильный термин для этого.

Это будет похоже на кнопку чата на Facebook или кнопку "Обратная связь", которая находится на некоторых веб-сайтах, следующих за вами на всей странице.

В моей ситуации я хочу держать div в абсолютном нижнем правом углу экрана в любое время. Пример CSS оценен.

Ответ 1

Возможно, вы ищете position: fixed.

Работает везде, кроме IE6 и многих мобильных устройств.

Ответ 2

Самый простой способ - использовать position: fixed:

.element {
  position: fixed;
  bottom: 0;
  right: 0;
}

http://www.w3.org/TR/CSS21/visuren.html#choose-position

(обратите внимание, что исправленная позиция не работает/не работает в iOS и Android-браузерах)

Ответ 3

Убедитесь, что ваш контент хранится в div, скажем divfix.

<div id="divfix">Your Code goes here</div>

Css:

#divfix {
       bottom: 0;
       right: 0;
       position: fixed;
       z-index: 3000;
        }

Надеюсь, это поможет вам.

Ответ 4

position: sticky;

Липкий элемент прилипает к верхней части страницы (верх: 0), когда вы достигнете положения прокрутки.

Смотрите пример:https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky

Ответ 5

Настройка:

position:fixed;

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

Ответ 6

position: fixed;

Это произойдет.

Он обрабатывается как position:absolute;, за исключением того, что он будет прокручиваться с окном, когда пользователь прокручивает содержимое.

Ответ 7

Чтобы сохранить плавающий текст в одном месте над изображением при изменении масштаба браузера, я использовал этот CSS:

position: absolute;
margin-top: -18%

Я думаю, что вместо фиксированных пикселей это%. Ура!

Ответ 8

#fixedbutton {
    position: fixed;
    bottom: 0px;
    right: 0px; 
    z-index: 1000;
}

z-index добавлен, чтобы затмить любой элемент с большим свойством, о котором вы, возможно, не знаете.

Ответ 9

Вы можете сделать это следующим образом:

#mydiv {
    position: fixed; 
    height: 30px; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

Это создаст div, который будет установлен поверх вашего экрана. - исправлено

Ответ 10

Попробуйте следующее:

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Ответ 11

HTML

<div id="fixedbtn"><button type="button" value="Delete"></button></div>

CSS

#fixedbtn{
 position: fixed;
 margin: 0px 10px 0px 10px;
 width: 10%;
}

Ответ 12

.div {
  position: fixed;
  bottom: 0;
  right: 0;
}