Float right и position absolute не работают вместе

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

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

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

106
css css-float position

5 ответов

использовать

position:absolute; right: 0;

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

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

247

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

23

вы можете использовать "translateX (-100%)" и "текст-выровняйте: право" Если ваш абсолютный элемент "дисплей: инлайн-блок"

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

1

я смог абсолютно позиционировать элемент с правым поплавком с одним слоем вложенности и хитрым полем:

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>

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

0