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

Question

我想要一个div总是在其父div的右侧，所以我使用float:right。有用。

但是我也希望它在插入时不会影响其他内容，所以我用position:absolute。

现在float:right不起作用，我的div总是在其父div的左侧。我怎样才能把它移到正确的位置？

Answer 1

使用

position:absolute; right: 0;

无需float:right绝对定位

此外，还要确保父元素设置为position:relative;

Answer 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）以确保在绘制高度时考虑到浮动。查看更多关于漂浮物的信息以及如何使用它们here。

Answer 3

一般来说，float是一个相对定位语句，因为它指定了元素相对于其父容器的位置（浮动到右侧或左侧）。这意味着它与position:absolute属性不兼容，因为position:absolute是绝对定位声明。您可以浮动元素并允许浏览器相对于其父容器定位该元素，也可以指定绝对位置并强制该元素出现在某个位置，而不管其父容器的位置。如果你想要一个绝对定位的元素出现在屏幕的右侧，你可以使用position: absolute; right: 0;，但是这会导致元素总是出现在屏幕的右边缘，无论它的父节点div有多宽（所以它将不会“在其母公司的权利”）。

Answer 4

您可以使用 “平移X（-100％）” 和 “文本对齐：右” 如果你的绝对要素是 “显示：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> 

你会得到绝对元素对齐相对其父母

Answer 5

我能够绝对定位右浮动元素与一层嵌套和棘手的边距：

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>

我决定把这个可切换的，所以你可以看到它如何在不影响周围的文本流（运行它，并按下按钮来显示/隐藏浮动绝对盒） 。