CSS 向右浮动和绝对位置不能一起工作

Float right and position absolute doesn't work together

提问by trbaphong

I want a div to be always at the right of its parent div, so I use float:right. It works.

我希望 div 始终位于其父 div 的右侧，因此我使用float:right. 有用。

But I also want it to not affect other content when inserted, so I use position:absolute.

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

Now float:rightdoesn't work, my div is always at the left of its parent div. How can I move it to the right?

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

回答by eivers88

Use

用

position:absolute; right: 0;

position:absolute; right: 0;

No need for float:rightwith absolute positioning

不需要float:right绝对定位

Also, make sure the parent element is set to position:relative;

另外，确保父元素设置为 position:relative;

回答by Edward

Generally speaking, floatis a relative positioning statement, since it specifies the position of the element relative to its parent container (floating to the right or left). This means it's incompatible with the position:absoluteproperty, because position:absoluteis an absolute positioning statement. You can either float an element and allow the browser to position it relative to its parent container, or you can specify an absolute position and force the element to appear in a certain position regardless of its parent. If you want an absolutely-positioned element to appear on the right side of the screen, you can use position: absolute; right: 0;, but this will cause the element to always appear on the right edge of the screen regardless of how wide its parent divis (so it won't be "at the right of its parent div").

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

回答by Alexander Ivashchenko

You can use "translateX(-100%)" and "text-align: right" if your absolute element is "display: inline-block"

如果您的绝对元素是“ 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>

You will get absolute-element aligned to the right relative its parent

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

回答by cereallarceny

Perhaps you should divide your content like such using floats:

也许您应该使用浮动来划分您的内容：

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

Notice the overflow: auto;, this is to ensure that you have some height to your container. Floating things takes them out of the DOM, to ensure that your elements below don't overlap your wandering floats, set a container divto have an overflow: auto(or overflow: hidden) to ensure that floats are accounted for when drawing your height. Check out more information on floats and how to use them here.

注意overflow: auto;，这是为了确保您的容器具有一定的高度。浮动的东西将它们从 DOM 中取出，以确保您下面的元素不会与您的浮动浮动重叠，请将容器设置div为具有overflow: auto(或overflow: hidden) 以确保在绘制高度时考虑浮动。在此处查看有关浮点数以及如何使用它们的更多信息。

回答by Adam Katz

I was able to absolutely position a right-floated element with one layer of nesting and a tricky margin:

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

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>

I decided to make this toggleable so you can see how it does not affect the flow of the surrounding text (run it and press the button to show/hide the floated absolute box).

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