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

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

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

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

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

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

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

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Пример кода:

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

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

Примечание: свойство float не работает для fixed и absolute позиции

Ответ 4

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

Пример:

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

Ответ 5

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

Ответ 6

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

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

Ответ 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. Что это для меня.