html - 绝对和固定定位在一起

Question

如您在此页面中所见:http://pitchfork.com/ ，右侧有一些音频元素。我检查过他们，他们似乎有绝对的定位。但如果向下滚动，您会发现它们已修复。

如何实现这种行为？元素可以是 Absolute 和 Fixed 定位的吗？

Answer 1

这是我找到的唯一方法:如@DreamTek 所说:

<div id="relative-layer">
    <div id="fixed-layer">
    </div>
</div>

在样式文件中:

#relative-layer {
    position:relative;
}

#fixed-layer {
    position: fixed;
    margin-top: 10px;
    margin-left: 10px;
}

因为使用 top 和 right 规则相对于窗口定位图层，但是如果使用 margin-top 和 margin- left 它相对于父层定位。

JSFIDDLE:http://jsfiddle.net/9HQ4b/1/