我有一个小元素，但它有很长的 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>
最佳答案
您是否尝试添加:
yellow.div{
position:fixed;
}
green.div{
position:fixed;
}
?
关于css - 使用CSS绝对和相对定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19864828/