HTML - 两个div并排

Question

我需要并排获得两个div，而其中一个居中，另一个固定。我已经把它们并排了。

问题在于，当绿色div的浮动是正确的时，我不能使它的位置固定。因此，当我滚动时，它不会留在屏幕上。

抱歉颜色:)仅供测试。

#Body {
    margin: 0 auto;
    width: 800px;
    background: #000;
}

#pinkdiv{
    position: relative;
    background: #F09;
}

#greediv{
    position: fixed;
    float:right;
    width:250px;
    background: #0F0;
}

任何帮助？

Answer 1

您不能在固定元素上使用float。相反，您需要像其他人所建议的那样使用right: 0。如果您希望绿色元素一直位于右上角，则还需要添加top: 0。

Demo

#greediv{
    position: fixed;
    right: 0;
    top: 0;
    width:250px;
    background: #0F0;
}

Answer 2

而不是float:right，而不是您发现的固定位置，请设置right:0。

Answer 3

你可以通过javascript实现：

if(window.scrollTop() > 0){
  document.getElementById('elementId').style.position="fixed";
}

这将在您滚动时修复div位置。

Answer 4

浮动元素会将其从文档流中取出，如果要使用固定定位，则必须使用right:0;

将div置于右侧