Absolute and fixed positioning together

Question

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

How can this behavior be achieved? Could the element be Absolute and Fixed?

Answer 1

This is the only way I found: for example, @DreamTek said:

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

and in the stylesheet:

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

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

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

Answer 2

Create a cool fixed scroll sidebar without javascript and a few lines of css.

Fixed vertical div with flexible horizontal positioning.

The fixed div in the script below is apparently located relative to the container, but this is just an illusion.

FIXED DIVS ALWAYS POSITIONED REGARDING THE SCREEN.

ABSOLUTE DIVS ALWAYS ARISE ABOUT THEIR NEAREST PROVISION: RELATIVE CONTAINER.

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*/ } 

The illusion of a div, which appears both absolute and fixed, is achieved using a negative margin and a container with a fixed width.

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

Small version of the site for screens of smaller width.

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

Answer 3

Well, the checked IS element is absolutely positioned, but it is placed inside the wrapper (in another parent element) - # player-modal, which is fixed positioned!

The absolute position is used inside a fixed positioned parent, so the .hud element should be only a few pixels outside the content area (the same distance in each resolution!). Thus, the floating is fixed in the content area, and not depending on the resolution (using fixed positioning + using the "right: 20px;" setting).

I just forgot to mention that this is possible because the site has a fixed width and does not respond to the layout, adapting to each resolution. If you plan to use this efect in a place with a fixed width - it will work, otherwise you may need a different solution.

Hope I explained it well! :-)

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 to the left , for example:

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