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

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

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

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

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

position:absolute; right: 0;

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

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

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

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

<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>

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

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

<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), чтобы гарантировать, что при рисовании вашей высоты учитываются поплавки. Дополнительную информацию о поплавках и их использовании можно найти здесь .

Я смог абсолютно позиционировать перемещаемый вправо элемент с одним слоем вложенности и сложным полем:

function test() {
  document.getElementById("box").classList.toggle("hide");
}

.right {
  float:right;
}
#box {
  position:absolute; background:#feb;
  width:20em; margin-left:-20em; padding:1ex;
}
#box.hide {
  display:none;
}

<div>
  <div class="right">
    <button onclick="test()">box</button>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
      nisi ut aliquip ex ea commodo consequat.
    </div>
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat.
  </p>
</div>

Я решил сделать это переключаемым, чтобы вы могли видеть, как это не влияет на поток окружающего текста (запустите его и нажмите кнопку, чтобы показать / скрыть плавающее абсолютное поле).