Поплавок справа и абсолютная позиция не работают вместе

Я хочу, чтобы div всегда находился справа от родительского div, поэтому я использую float:right. Он работает.

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

Теперь float:right не работает, мой div всегда слева от родительского div. Как я могу переместить его вправо?

Ответ 1

Использование

position:absolute; right: 0;

Нет необходимости в float:right с абсолютным позиционированием

Кроме того, убедитесь, что родительский элемент установлен на position:relative;

Ответ 2

Вообще говоря, float является относительным оператором позиционирования, поскольку он указывает положение элемента относительно его родительского контейнера (плавающего вправо или влево). Это означает, что он несовместим с свойством position:absolute, потому что position:absolute - это оператор абсолютного позиционирования. Вы можете либо поместить элемент, либо позволить браузеру расположить его относительно его родительского контейнера, либо вы можете указать абсолютную позицию и заставить элемент отображаться в определенной позиции независимо от его родителя. Если вы хотите, чтобы в правой части экрана появился абсолютно позиционированный элемент, вы можете использовать position: absolute; right: 0;, но это приведет к тому, что элемент будет всегда отображаться на правом краю экрана независимо от того, насколько широко его родительский div (поэтому он не будет "справа от родительского div" ).

Ответ 3

Вы можете использовать " translateX (-100%)" и " text-align: right", если ваш абсолютный элемент " отображен: встроенный блок"

<div class="box">
<div class="absolute-right"></div>
</div>

<style type="text/css">
.box{
    text-align: right;
}
.absolute-right{
    display: inline-block;
    position: absolute;
}

/*The magic:*/
.absolute-right{
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
</style>

Вы получите абсолютный элемент, выровненный по правилу относительно его родительского

Ответ 4

Возможно, вы должны разделить свой контент таким образом, используя float:

<div style="overflow: auto;">
    <div style="float: left; width: 600px;">
        Here is my content!
    </div>
    <div style="float: right; width: 300px;">
        Here is my sidebar!
    </div>
</div>

Обратите внимание на overflow: auto;, чтобы убедиться, что у вас есть высота для вашего контейнера. Плавающие вещи вынимают их из DOM, чтобы гарантировать, что ваши элементы ниже не перекрывают ваши блуждающие поплавки, установите для контейнера div значение overflow: auto (или overflow: hidden), чтобы гарантировать, что поплавки учитываются при рисовании ваш рост. Ознакомьтесь с дополнительной информацией о поплавках и о том, как их использовать здесь.