浮动权利和绝对位置不一起工作
我想要一个div总是在它的父div的权利，所以我使用float:right 。 有用。
但是我也希望插入时不会影响其他内容，所以我使用position:absolute 。
现在float:right不起作用，我的div总是在它的父div的左边。 我怎样才能把它移到右边？
使用
position:absolute; right: 0;
无需float:right绝对定位的float:right
另外，确保父元素被设置为position:relative;
一般来说， float是一个相对定位语句，因为它指定了元素相对于其父容器的位置（向右或向左浮动）。 这意味着它与position:absolute属性是不相容的，因为position:absolute是一个绝对的定位语句。 您可以浮动元素并允许浏览器相对于其父容器定位，也可以指定绝对位置并强制该元素出现在某个位置，而不pipe其父容器是否在其中。 如果你想要一个绝对定位的元素出现在屏幕的右侧，你可以使用position: absolute; right: 0; position: absolute; right: 0; ，但是这将导致元素总是出现在屏幕的右边缘，而不pipe它的父div有多宽（所以它不会在“它的父div的右边”）。
也许你应该像使用浮游物一样划分你的内容：
<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中拿出来，以确保你的元素不会与你的stream水漂浮物重叠，设置一个容器div有一个overflow: auto （或者overflow: hidden ），以确保浮点数在绘制高度。 查看更多关于浮动的信息，以及如何在这里使用它们。
如果您的绝对元素是“ 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>
您将获得绝对元素对其相对于其父母的权利
