html固定定位概念,html – 绝对和固定定位在一起

创建一个很酷的固定滚动侧边栏,没有javascript和几行css.

固定垂直div,灵活的水平定位.

下面小提琴中的固定div似乎相对于容器定位,但这只是一种幻觉.

固定的DIVS总是与屏幕相对应.

绝对的潜水总是出现相对于他们最近的位置：相对的’容器.

HTML

WRAP

FIXED

CSS

.Wrap{

background:#ccc;

width:600px;

height:300px;

margin:0 auto;

}

.Fixed{

position:fixed;

top:20px;

right:50%; /* this is the trick to make the fixed div appear absolute */

background:#333;

height:100px;

width:50px;

margin-right:-360px; /*Must be half of container width plus desired positioning*/

}

通过使用负边距和固定宽度容器来实现同时出现绝对和固定的div的错觉.

小网站版本适用于较小宽度的屏幕.