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

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或bottom）与其最近的祖先（包含元素）的位置position，无论它是否具有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

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 div to 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.

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>

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