Absolute and fixed positioning together

Question

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?

Answer 1

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

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

and in the styles file:

#relative-layer {
    position:relative;
}

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

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/

Answer 2

Create a fixed scrolling sidebar with no JavaScript and a few lines of CSS.

The fixed div in the fiddle below appears to be positioned relative to the container but this is just an illusion.

It can be achieved using percentage widths or by using fixed widths and the setting a negative margin relative to the container width.

FLUID WIDTH

.wrap {
  background: #ccc;
  width: 90%;
  height: 1000px;
}

.fixed {
  position: fixed;
  top: 10px;
  right: 0;
  background: #333;
  height: 100px;
  width: 10%;
}

<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>

---

FIXED WIDTH

.wrap {
  background: #ccc;
  width: 200px;
  height: 1000px;
  margin: 0 auto;
}

.fixed {
  position: fixed;
  top: 20px;
  right: 50%;
  background: #333;
  height: 100px;
  width: 50px;
  margin-right: -160px;
}

<div class="wrap">WRAP</div>
<div class="fixed">FIXED</div>

---

A note about CSS positioning.

FIXED

Element is always positioned relative to the screen.

ABSOLUTE

Element is positioned relative to the nearest parent container with a position attribute.