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

126

Я хочу, щоб div завжди знаходився праворуч від свого батьківського діва, тому я використовую float:right. Це працює.

Але я також хочу, щоб він не впливав на інший вміст при вставці, тому я використовую position:absolute.

Тепер float:rightне працює, мій дів завжди знаходиться зліва від його батьківського діла. Як я можу перемістити його праворуч?

css css-float position

— trbaphong
джерело

294

Використовуйте

position:absolute; right: 0;

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

Також переконайтеся, що для батьківського елемента встановлено значення position:relative;

— eivers88
джерело

якщо в центрі материнського елемента хочете діва, то як це зробити?

— trbaphong

Спасибі за вашу допомогу. Я використовую left:50%і margin-left:-??px(?? залежать від вашої ширини Div)

— trbaphong

Відповідь @ eivers88 мені ще потрібно видалити "overflow-y: auto;" від батьківського елемента, щоб він працював.

— ангелох

що робити, якщо ширина Div є динамічною

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

2

Гаразд, у мене з’явився цей плавець: право не потрібно для абсолютного позиціонування, але ... А як бути, коли у вас є два абсолютних елемента всередині одного (позиції: відносного) батька, і ви хочете, щоб вони були вирівняні вправо, один біля іншого? Їх ширина динамічна ...

— spuas

26

Взагалі кажучи, floatце відносне твердження про позиціонування, оскільки воно визначає положення елемента відносно його батьківського контейнера (плаваючий праворуч або ліворуч). Це означає, що воно несумісне з position:absoluteвластивістю, оскільки position:absoluteце абсолютна заява про позиціонування. Ви можете або плавати елемент, і дозволити веб-переглядачу розміщувати його відносно його батьківського контейнера, або ви можете вказати абсолютне положення і змусити елемент відображатися у певній позиції незалежно від його батьківського. Якщо ви хочете, щоб абсолютно розміщений елемент відображався в правій частині екрана, ви можете використовувати його position: absolute; right: 0;, але це призведе до того, що елемент завжди з’явиться в правому краї екрану, незалежно від того, наскільки широкий його батьківський div(так він виграв ' t бути "праворуч від його батьківського діла").

— Едвард
джерело

3

Якщо батько divє position: relative, це divрозташується праворуч від цього батька, а не екран.

— трис

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

— крупарцена
джерело

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>

Розгорніть фрагмент

Я вирішив зробити це перемиканням, щоб ви могли бачити, як це не впливає на потік навколишнього тексту (запустіть його та натисніть кнопку, щоб показати / приховати плаваюче абсолютне поле).

— Адам Кац
джерело