Question

我有一个小项目，但它有很长的HTML代码，因为我会给它链接。链接：http://1zh.us/examples/position.html

这就是我想要的：当我滚动左右 - 左边我想要黄色div固定（不改变位置），但当我向上滚动时，我想要绿色div到蜜蜂固定。我尝试了固定，相对和绝对定位的所有组合，但没有结果。我希望这可以用html5和css完成。

查看链接上的示例并从左上方向上滚动以查看我想要的内容谢谢你的帮助...

<!doctype html>
<html>
<head>
</head>
<body><div id="randevu_sag" style="position:fixed; top:25px; left:235px; bottom:0px; right:0px; overflow:auto;">
<div id="rust" style="left:0px; top:0px; height:27px; width:1863px; background-color:green;">
<div style="position:relative; width:49px; height:25px; float:left; border-right:solid 1px #9a4b9d; border-bottom:solid 2px #000;">Saat</div>
<div style="position:relative; margin-left:2px; width:299px; height:25px; float:left; border-right:solid 1px #9a4b9d; border-bottom:solid 2px #000;">Bolum1</div>
<div style="position:relative; margin-left:2px; width:299px; height:25px; float:left; border-right:solid 1px #9a4b9d; border-bottom:solid 2px #000;">Bolum2</div>
<div style="position:relative; margin-left:2px; width:299px; height:25px; float:left; border-right:solid 1px #9a4b9d; border-bottom:solid 2px #000;">Bolum3</div>
<div style="position:relative; margin-left:2px; width:299px; height:25px; float:left; border-right:solid 1px #9a4b9d; border-bottom:solid 2px #000;">Bolum4</div>
<div style="position:relative; margin-left:2px; width:299px; height:25px; float:left; border-right:solid 1px #9a4b9d; border-bottom:solid 2px #000;">Bolum5</div>
<div style="position:relative; margin-left:2px; width:299px; height:25px; float:left; border-right:solid 1px #9a4b9d; border-bottom:solid 2px #000;">Bolum6</div>
</div>

<div id="ralt" style="left:0px; top:27px; width:1863px">
<div style="position:absolute; left:0px; width:49px; float:left; border-right:solid 1px #9a4b9d; background-color:yellow;">
<div id="1383890400" style="border-bottom:solid 1px #000; height:2225px; width:50px; overflow:hidden;"></div>
</div>
<div style="position:absolute; left:51px; float:left;">
<div style="position:absolute; left:0px; width:299px; float:left; border-right:solid 1px #9a4b9d;">
<div id="1383890400" style="border-bottom:solid 1px #000; border-left:solid 5px blue; height:2225px width:292px; overflow:hidden;">birinci</div>
</div>
<div style="position:absolute; left:302px; float:left; width:299px; border-right:solid 1px #9a4b9d;">
<div id="1383890400" style="border-bottom:solid 1px #000; border-left:solid 5px blue; height:2225px; width:292px; overflow:hidden;">ikinci</div>
</div>
<div style="position:absolute; left:604px; float:left; width:299px; border-right:solid 1px #9a4b9d;">
<div id="1383890400" style="border-bottom:solid 1px #000; border-left:solid 5px blue; height:2225px; width:292px; overflow:hidden;">ucuncu</div>
</div>
<div style="position:absolute; left:906px; float:left; width:299px; border-right:solid 1px #9a4b9d;">
<div id="1383890400" style="border-bottom:solid 1px #000; border-left:solid 5px blue; height:2225px; width:292px; overflow:hidden;">dorduncu</div>
</div>
<div style="position:absolute; left:1208px; float:left; width:299px; border-right:solid 1px #9a4b9d;">
<div id="1383890400" style="border-bottom:solid 1px #000; border-left:solid 5px blue; height:2225px; width:292px; overflow:hidden;">besinci</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

您是否尝试添加：

yellow.div{
position:fixed;

}

green.div{
position:fixed;
}

Answer 2

这是我对你的黄色专栏的建议

<div style="position:fixed; width:49px; float:left; border-right:solid 1px #9a4b9d; background-color:yellow;">

或在CSS

中

element.style {
position: fixed;
width: 49px;
float: left;
border-right: solid 1px #9a4b9d;
background-color: yellow;
}

用绝对和相对的css定位

2 个答案: