浮动权利和绝对位置不能同时使用

125

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

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

现在float:right不起作用，我的div始终位于其父div的左侧。如何将其向右移动？

css css-float position

— 特拉巴蓬
source

294

用

position:absolute; right: 0;

无需float:right绝对定位

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

— eivers88
source

如果想要div位于父元素的中心，该怎么办？

— trbaphong 2012年

谢谢你的帮助。我使用left:50%和margin-left:-??px（??取决于您的div宽度）

— trbaphong 2012年

用@ eivers88的答案，我仍然需要删除'overflow-y：auto;'。从父元素开始工作。

— angelokh 2014年

如果div的宽度是动态的，怎么办

— Muhammad Umer 2014年

2

好的，我得到了一个浮点数：绝对定位不需要右边的，但是...如果在同一个（position：relative）父对象中有两个绝对元素，并且您希望它们在右边对齐，一个在另一个旁边，该怎么办？它们的宽度是动态的……

— spuas

26

一般而言，float是相对定位语句，因为它指定元素相对于其父容器的位置（向右或向左浮动）。这意味着它与position:absolute属性不兼容，因为position:absolute它是绝对定位语句。您可以浮动一个元素并允许浏览器相对于其父容器定位它，也可以指定一个绝对位置并强制该元素出现在某个位置，而不管其父元素如何。如果要将绝对定位的元素显示在屏幕的右侧，可以使用position: absolute; right: 0;，但这将使该元素始终显示在屏幕的右侧，而不管其父级的宽度如何div（因此， t是“在其父div的右侧”）。

— 爱德华
source

3

如果父级div为position: relative，则div它将位于该父级的右侧，而不是屏幕的右侧。

— trysis

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>

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

— 亚历山大·伊瓦申科（Alexander Ivashchenko）
source

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）以确保在绘制高度时考虑到浮动元素。在此处查看有关浮动的更多信息以及如何使用它们。

— 谷物盗窃
source

0

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

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>

展开摘要

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

— 亚当·卡兹（Adam Katz）
source