0

我有一个小项目，但它有很长的 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>
4

2 回答 2

1

您是否尝试添加：

yellow.div{
position:fixed;

}

green.div{
position:fixed;
}

?

于 2013-11-08T17:19:49.417 回答
0

这是我对你的黄色专栏的推荐

<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;
}
于 2013-11-08T17:24:55.833 回答