Question

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

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

Answer 1

创建一个很酷的固定滚动侧边栏，没有javascript和几行css。

固定垂直div，具有灵活的水平定位。

下面小提琴中的固定div似乎相对于容器定位，但这只是幻觉。

已修复 DIVS始终与屏幕相关。

绝对 DIVS总是出现相对于他们最近的位置：相对的'容器。

<强> HTML

<div class="Wrap">WRAP</div>
<div class="Fixed">FIXED</div>

<强> CSS

.Wrap{
    background:#ccc;
    width:600px;
    height:300px;
    margin:0 auto;
}
.Fixed{
    position:fixed;
    top:20px;
    right:50%; /* this is the trick to make the fixed div appear absolute */
    background:#333;
    height:100px;
    width:50px;
    margin-right:-360px; /*Must be half of container width plus desired positioning*/
}

通过使用负边距和固定宽度容器来实现同时显示绝对和固定的div的错觉。

http://jsfiddle.net/9HQ4b/2/

较小宽度屏幕的小型网站版本。

http://jsfiddle.net/9HQ4b/3/

Answer 2

这是我找到的唯一方法：像@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/

Answer 3

嗯，被检查的元素是绝对定位的，但是放在一个包装器中（在另一个父元素中） - ＃player-modal，它是固定的！

绝对位置在固定定位的父级内使用，因此.hud元素只是内容区域外的几个像素（每个分辨率中的间距相同！）。这样浮动就固定在内容区域，而不是取决于分辨率（使用固定定位+使用“right：20px;”设置）。

我只是忘了提到它是可能的，因为该网站具有固定的宽度和无响应的布局，适应每个分辨率。如果您计划在具有固定宽度的站点上使用此效果 - 它将起作用，否则您可能需要另一种解决方案。

我希望我已经解释得很好！： - ）

Answer 4

您也可以使用calc()来实现此目的。（在IE9 +中受支持）：

.fixed {
    position: fixed;
    right: calc(50% - 360px); 
    /* Replace 360px with half of container width plus desired positioning */
}

或者如果您想要左侧的固定div ，例如：

.fixed {
    position: fixed;
    left: calc(50% - 360px); 
    /* Replace 360px with half of container width plus desired positioning */
}

绝对和固定定位在一起

4 个答案: