Question

是否可以将元素绝对定位在固定位置容器内？例如：

<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>

我希望能够使用jQuery移动左右容器div（以及它的子容器），但这显然不起作用（移动容器＆＃39） ; s left属性不影响孩子们）。

我试过这样的事情：

<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>

......但它不起作用。我知道我最终可以放下容器并同时为每个固定位置的孩子制作动画，但我真的不愿意。我可能最后会添加更多的孩子，这将意味着管理每个孩子的动画/动作（现在我想起来了，我可以为每个孩子添加一个类，并让jQuery为左边的属性设置动画该课程的所有课程，但如果可能，我仍然更愿意解决我的初始问题。）

Hacks are welcome!

Answer 1

为孩子使用亲戚，而不是固定。

<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

孩子应该绝对位置（因为他们绝对位于固定容器内）。

查看此演示： 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>

绝对将元素定位在固定位置容器内

2 个答案: