Absolutely position elements inside a fixed position container

Question

Is it possible to absolutely position elements inside a fixed position container? For example:

<div style="position:fixed; left:0; top:0">
    <div style="position:fixed; left:0; top:0;"></div>
    <div style="position:fixed; left:200px; top:120px;"></div>
</div>

I want to be able to move, using jQuery, the container div to the left and right (and it's children along with it), but this obviously doesn't work (moving the container's left property does not affect the children).

I tried something like this:

<div style="position:fixed; left:0; top:0">
    <div style="position:relative; width:100%; height:100%;">
        <div style="position:fixed; left:0; top:0;"></div>
        <div style="position:fixed; left:200px; top:120px;"></div>
    </div>
</div>

...but it doesn't work. I know I could ultimately just drop the container and animate each of the fixed position children at the same time, but I'd really prefer not to. I'll probably end up adding more children later, and that would mean managing the animations/movements of each one (now that I think of it, I could just add a class to each child, and have jQuery animate the left property of all occurances of that class, but I'd still prefer to resolve my initial problem if possible).

Hacks are welcome!

Answer 1

use relative for the children, not fixed.

<div style="position:fixed; left:0; top:0">
    <div style="position:relative; left:0; top:0;"></div>
    <div style="position:relative; left:200px; top:120px;"></div>
</div>

Answer 2

The children should be position absolute (because they are positioned absolutely within the fixed container).

See this demo: http://jsfiddle.net/74dE7/2/

#fixed-box {
    position: fixed;
    height: 300px;
    width: 300px;
    background: red;
    right: 10px;
    top: 10px;
}

#absolute-box {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: blue;
    height: 50px;
    width: 50px;
}

<div id="fixed-box">
    <div id="absolute-box">
    </div>
</div>