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

126

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

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

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

css css-float position

— trbaphong
источник

295

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

position:absolute; right: 0;

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

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

— eivers88
источник

если нужно div в центре родительского элемента, как я могу это сделать?

— trbaphong 04

Спасибо за вашу помощь. Я использую left:50%и margin-left:-??px(?? в зависимости от ширины вашего div)

— trbaphong 04

С ответом @eivers88 мне все еще нужно удалить 'overflow-y: auto;' из родительского элемента, чтобы он работал.

— ангелох

что, если ширина div является динамической

— Мухаммад Умер

2

Хорошо, я понял, что float: right не требуется для абсолютного позиционирования, но ... А как насчет случая, когда у вас есть два абсолютных элемента внутри одного (position: relative) родительского элемента, и вы хотите, чтобы они выровнялись по правому краю, один рядом с другим? Их ширина динамична ...

— spuas 02

26

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

— Эдвард
источник

3

Если родитель divесть position: relative, divон будет расположен справа от этого родителя, а не на экране.

— trysis

3

Вы можете использовать " 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>

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

— Александр Иващенко
источник

2

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

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

— cereallarceny
источник

0

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

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>

Развернуть фрагмент

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

— Адам Кац
источник