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