浮动权和绝对位置不能一起工作

Question

我希望div总是位于其父div的右侧,所以我使用float:right.有用.

但我也希望它在插入时不影响其他内容,所以我使用position:absolute.

现在float:right不起作用,我的div总是在其父div的左边.我该怎么把它移到右边？

Answer 1

使用

position:absolute; right: 0;

无需float:right绝对定位

另外,请确保将父元素设置为 position:relative;

Answer 2

一般来说,float是一个相对定位语句,因为它指定了元素相对于其父容器的位置(向右或向左浮动).这意味着它与position:absolute属性不兼容,因为position:absolute它是绝对定位语句.您可以浮动元素并允许浏览器相对于其父容器定位它,也可以指定绝对位置并强制元素出现在某个位置而不管其父级.如果你想要一个绝对定位的元素出现在屏幕的右侧,你可以使用position: absolute; right: 0;,但这将导致元素总是出现在屏幕的右边缘,无论它的父有多宽div(所以它赢了' t"在其父div的右边").

Answer 3

如果你的绝对元素是“ display: inline-block ” ，你可以使用“ 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>

您将获得相对于其父级向右对齐的绝对元素