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

Question

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

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

Пример кода:

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

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

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

Answer 3

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

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

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

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

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

Answer 4

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

Пример:

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

Answer 5

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

Answer 6

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

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

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 . Вот что сделало это для меня.