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

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 的元素将被放置在您指定的任何偏移量处（带有​​left、right、top 或top 或bottom）与其最近的祖先（包含元素）的位置（带有@987654329） @ 属性，不管它是否有float 属性。如果它没有任何具有position 属性的祖先，它将被放置在您指定的距屏幕边缘的偏移处。

如果您希望绝对定位的元素出现在其父 div 的右侧，则可以使用 position: absolute; right: 0; -- 只要父 div 具有诸如 position:relative 之类的位置属性。但是，如果父 div 没有位置属性，这将不起作用，您需要坚持使用 float:right。

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>

您将获得与右侧对齐的绝对元素相对于其父项

Answer 4

也许你应该像这样使用浮点数来划分你的内容：

<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 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>

我决定将此设置为可切换的，这样您就可以看到它如何不影响周围文本的流动（运行它并按下按钮以显示/隐藏浮动的绝对框）。