CSS绝对和相对位置
[英]Position with css absolute and relative
问题描述
i have a little project but it have long html code, becouse of that i will give link to it. 
我有一个小项目，但是它有很长的html代码，因为我会给它链接。 link: http://1zh.us/examples/position.html 链接： http ： //1zh.us/examples/position.html
this is what i want: when i scroll left-right-left i want yellow div to bee fixed (not changing position) but when i scroll up-down-up i want green div to bee fixed. 这就是我想要的：当我左右左右滚动时，我希望将黄色div固定（不改变位置），但是当我上下滚动时，我希望将绿色的div固定。 i have tryed all combinations of fixed, relative and absolute positioning but without result. 我尝试了固定，相对和绝对定位的所有组合，但没有结果。 i hope that this can be done with html5 and css. 我希望可以使用html5和CSS做到这一点。
look at the sample on the link and scroll it up-down left-right to see exactly what i want thank you for your help... 查看链接上的示例，然后左右左右滚动，以查看我想要的内容，谢谢您的帮助...
<!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>
2 个解决方案
解决方案1
1
Did you try to add: 您是否尝试添加：
yellow.div{
position:fixed;
}
green.div{
position:fixed;
}
? ？
解决方案2
0 2013-11-08 17:24:55
This is my recommendation for your yellow column 这是我对您的黄色专栏的建议
<div style="position:fixed; width:49px; float:left; border-right:solid 1px #9a4b9d; background-color:yellow;">
or in CSS 或在CSS中
element.style {
position: fixed;
width: 49px;
float: left;
border-right: solid 1px #9a4b9d;
background-color: yellow;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.