对齐固定的问题

Question

如何在所有屏幕分辨率下使用左侧的容器div制作固定的div棒？

#container{
    background-color:#000;
    filter:alpha(opacity=85);
    -moz-opacity: 0.85; 
    opacity: 0.85; 
    width:1000px;
    min-height:1275px;
    height:100%;
    margin:auto;
}

#fixed{
    position: fixed; 
    top:150px; 
}

Answer 1

不确定我是否理解正确。也许这会奏效：

#container{
    background-color:#000;
    filter:alpha(opacity=85);
    -moz-opacity: 0.85; 
    opacity: 0.85; 
    width:1000px;
    min-height:1275px;
    height:100%;
    margin:auto;

    position:relative;
}

#fixed{
    position: absolute; 
    top:150px; 
}

看看：http://jsfiddle.net/gQP8X/2/ 注意：我已经对更好的jsfiddle一致性进行了一些更改。

Answer 2

在修复css属性的情况下，这是不可能的，但你可以做的是将容器div相对于固定div绝对位置然后用Jquery模拟固定效果。 例子

容器{

background-color:#000;
filter:alpha(opacity=85); 
-moz-opacity: 0.85; 
opacity: 0.85; 
width:1000px;
min-height:1275px;
height:100%;
margin:auto;
position:relative;
}

固定{

width:100px;
position:absolute; 
top:150px;
left:-100px;

}

jQuery

    $（document）.ready（function（）{     var $ scrollingDiv = $（“＃fixed”）;     $（窗口）.scroll（函数（）{     $ scrollingDiv     。停（）     .animate（{“marginTop”:( $（window）.scrollTop（）+ 0）+“px”}，“slow”）;     }）;     }）;

Answer 3

试试这个，

 #wrapper{
    width: 600px;
    height: 2000px;
    margin: auto;
    position: relative;

 }

 #content{
    margin: auto;
    width: inherit;
    height: 100%;
    float: left;
 }

 #sidebar{
    width: 100px;
    height: 100%;
    position: absolute;
        left: -100px;
 }

 #fixed{
    top: 100px;
    width: 100px;
    height: 150px;
    position: fixed;
    background-color: cyan;
 }

和

    <div id="wrapper">
        <div id="content"></div>
        <div id="sidebar">
            <div id="fixed">something</div>
        </div>
    </div>