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?

Amparoampelopsis

They look to be positioned absolutely within a container that's fixed. – Kiefer

Fixed. Here is good explanation about different positioning - css-tricks.com/… – Upbuild

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/

Amparoampelopsis

Please see my fiddle above I have recreated the audio element as it appears on your linked website. The div will scroll with the page but always stay next to the wrapper. Hope this helps. – Swanky

This will not work correctly if your relative div is bigger than viewport. – Alagoas

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.

Swanky

As you can see here: jsfiddle.net/9HQ4b, it doesn't work properly. The right value is respect to the whole page... – Amparoampelopsis

I think it is the opposite. A relative layer inside a fixed layer. Is it right? – Amparoampelopsis

After looking at your fiddle I see the misunderstanding. Position fixed is always relative to the screen. You need position absolute to position relative to another element – Swanky

Finally I found the answer. I did like you said, but giving margin rule instead of top and right to the fixed element. In this way it is relative to the parent layer. – Amparoampelopsis

In the way you comment, the layer won't be vertically fixed. – Amparoampelopsis

I'm not sure this will do as expected when you scroll the screen. Margins have no effect on a fixed element. I would be happy to help with your code if you clarify what end result you would like to achieve. – Swanky

Yes. Have a look at my new answer – Amparoampelopsis

I don't really understand your fiddle. The fixed element is not shown. – Amparoampelopsis

I see the problem the div will be off the screen in smaller screens due to the limited space available in fiddle. Ive added a new link above with a smaller container. Make the html results box in fiddle as wide as possible. – Swanky

All right. Now I see it. Also good option, but I think mine is more simply. I'd give you +1, but I had already given it :) – Amparoampelopsis

Answer 3

Well, the inspected element IS absolute positioned, but is placed inside a wrapper (in another parent element) - #player-modal, which is fixed positioned!

The absolute position is used inside the fixed positioned parent, so the .hud element to be just a few pixels outside the content area (same spacing in every resolution!). This way the floating is fixed to the content area, instead of depending on the resolution (using fixed positioning + using the "right: 20px;" setting).

I just forgot to mention that it's possible, because the site has fixed width and not responsive layout, adjusting to every resolution. If you plan to use this efect on site with fixed width - it will work, otherwise you could need another solution.

I hope I've explained it well! :-)

Terrorstricken

Hi Manolo, I think you are a developer and you want to learn how to do it yourself... This is the reason I didn't gave you any code so far. Let me know if you need code and/or detailed explanation. – Terrorstricken

Answer 4

You can also use calc() to achieve this. (supported in IE9+):

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

or if you want your fixed div on the left, for instance:

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

Unimpeachable