绝对和固定在一起 [英] Absolute and fixed positioning together

问题描述

正如你可以在这个页面看到的： http://pitchfork.com/ ，有一些音频元素右边。我检查了他们，他们似乎有绝对的定位。但是如果你向下滚动，你会发现它们是固定的。

As you can see in this page: http://pitchfork.com/ , there are some audio elements on the right side. I've inspected them and they seem to have absolute positioning. But if you scroll down, you'll see that they are fixed.

如何实现这种行为？可以是一个元素绝对和固定定位？

How can achieve this behavior? Can be an element Absolute and Fixed positioned?

推荐答案

这是我找到的唯一途径：像@DreamTek说的：

This is the only way I've found: like @DreamTek said:

<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 它相对于父层定位。

because using top and right rules positions the layer relative to the window, but if using margin-top and margin-left it is positioned relative to the parent layer.

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

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

这篇关于绝对和固定在一起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！