Совместите div с фиксированным положением на правой стороне

Question

Я хочу показать div который всегда виден, даже когда пользователь прокручивает страницу. Я использовал CSS position: fixed; для этого.

Теперь я также хочу показать div в правом углу родителя div,

Я попытался использовать этот код CSS для достижения цели:

.test {
  position: fixed;
  text-align: right;
}

Но это не выравнивает элемент на правой стороне.

Мой пример страницы можно найти здесь, div элемент, который я хочу выровнять, называется test под родительским классом parent,

Есть ли какое-либо решение CSS или JavaScript для выравнивания элемента с фиксированной позицией в правой части экрана?

Answer 1

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

Что-то вроде....

.test
{
   position:fixed;
   left:100px;
   top:150px;
}

Исправлено - Генерирует абсолютно позиционированный элемент, расположенный относительно окна браузера. Положение элемента задается свойствами "left", "top", "right" и "bottom"

Подробнее о положении здесь.

Answer 2

Вы можете использовать два встроенных div. Но вам нужна фиксированная ширина для вашего контента, это единственное ограничение.

<div style='float:right; width: 180px;'>
 <div style='position: fixed'>
   <!-- Your content -->
 </div>
</div>

Answer 3

Используйте атрибут 'right' вместе со стилем фиксированной позиции. Предоставленное значение действует как смещение справа от границы окна.

Пример кода:

.test {
  position: fixed;
  right: 0;
}

Если вам нужно немного отступов, вы можете установить right свойство с определенным значением, например: right: 10px,

Замечания: float свойство не работает на должность fixed а также absolute

Answer 4

Пытаюсь сделать то же самое. Если вы хотите, чтобы он был выровнен по правой стороне, установите значение right в 0, В случае, если вам нужно добавить отступ справа, установите значение для нужного вам размера.

Пример:

.test {
  position: fixed;
  right: 20px; /* Padding from the right side */
}

Answer 5

Сделайте родительский div, в css сделайте его плавающим: прямо тогда исправьте положение дочернего div, это позволит div оставаться на своей позиции всегда и справа

Answer 6

Я использую это, чтобы поместить div (с его содержимым внутри) в правом нижнем углу страницы с некоторым полем:

      .my-div-container{
    position: fixed;
    bottom: 1rem;
    left: 90%;
}

Answer 7

Вот реальное решение (с другими классными CSS3):

#fixed-square {
position: fixed;
top: 0;
right: 0;
z-index: 9500;
cursor: pointer;
width: 24px;
padding: 18px 18px 14px;
opacity: 0.618;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transition: all 0.145s ease-out;
-moz-transition: all 0.145s ease-out;
-ms-transition: all 0.145s ease-out;
transition: all 0.145s ease-out;
}

Обратите внимание на верх:0 и справа:0. Вот что сделал это для меня.

Answer 8

Лучшее решение, которое я нашел, — дать элементу левое поле. Элементы под ним в левом поле будут доступны для щелчка

Answer 9

Просто сделай это. Не влияет на горизонтальное положение.

.test {
 position: fixed;
 left: 0;
 right: 0;
 }

Answer 10

Вы можете просто сделать это:

.test {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  right: 0;
}