Absolute and fixed positioning together

问题

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?

回答1:

Create a cool fixed scrolling sidebar with no javascript and a few lines of css.

Fixed vertical div with flexible horizontal positioning.

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

FIXED DIVS ARE ALWAYS POSITIONED RELATIVE TO THE SCREEN.

ABSOLUTE DIVS ALWAYS APPEAR RELATIVE TO THEIR NEAREST 'POSITION: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 that appears both absolute and fixed at the same time is acheived by using a negative margin and a fixed width container.

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

Small site version for smaller width screens.

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

回答2:

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/

回答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! :-)

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

来源：https://stackoverflow.com/questions/21190674/absolute-and-fixed-positioning-together

标签

html

css

css-position