固定位置但相对于集装箱

Question

固定位置但相对于集装箱我在试着修复div因此，它总是粘在屏幕的顶部，使用：position: fixed;top: 0px;right: 0px;但是，div在一个居中的容器里。当我用position:fixed它修复了div相对于浏览器窗口，例如它相对于浏览器的右侧。相反，它应该相对于容器进行固定。我知道position:absolute可以用于修复相对于div，但是当您向下滚动页面时，元素就会消失，不会像下面这样粘在顶部position:fixed.是否有一个黑客或解决办法来实现这一点？

Answer 1

实际上，这是有可能的，而公认的答案只涉及集中化，这是相当直截了当的。而且，您真的不需要使用JavaScript。

这将允许您处理任何场景：

设置一切，如果您想要定位：绝对在一个位置：相对容器，然后在div内创建一个新的固定位置divposition: absolute，但是不设置其顶部和左侧属性。然后，它将被固定在你想要的任何地方，相对于容器。

例如：

/* Main site body */

.wrapper {

    width: 940px;

    margin: 0 auto;

    position: relative; /* Ensure absolute positioned child elements are relative to this*/

}

/* Absolute positioned wrapper for the element you want to fix position */

.fixed-wrapper {

    width: 220px;

    position: absolute;

    top: 0;

    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */

}

/* The element you want to fix the position of */

.fixed {

    width: 220px;

    position: fixed;

    /* Do not set top / left! */

}

<div class="wrapper">

    <div class="fixed-wrapper">

        <div class="fixed">

            Content in here will be fixed position, but 240px to the left of the site body.

        </div>

    </div>

</div>

可悲的是，我希望这条线能解决我和Android的问题WebKit呈现框影模糊像素作为固定位置元素的边距，但它似乎是一个错误。

不管怎样，我希望这能帮上忙！