html – 绝对和固定定位在一起

概述正如您在此页面中看到的： http://pitchfork.com/,右侧有一些音频元素.我检查了他们,他们似乎有绝对的定位.但如果你向下滚动,你会发现它们是固定的. 怎么能实现这种行为？可以是一个绝对和固定的元素定位？ 创建一个很酷的固定滚动侧边栏,没有javascript和几行css. 固定垂直div,灵活的水平定位. 下面小提琴中的固定div似乎相对于容器定位,但这只是一种幻觉. 固定的DI 正如您在此页面中看到的： http://pitchfork.com/,右侧有一些音频元素.我检查了他们,他们似乎有绝对的定位.但如果你向下滚动,你会发现它们是固定的.

怎么能实现这种行为？可以是一个绝对和固定的元素定位？

解决方法 创建一个很酷的固定滚动侧边栏,没有JavaScript和几行CSS.

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

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

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

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

HTML

<div >WRAP</div><div >FIXED</div>

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的错觉.

http://jsfiddle.net/9HQ4b/2/

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

http://jsfiddle.net/9HQ4b/3/

总结

以上是内存溢出为你收集整理的html – 绝对和固定定位在一起全部内容，希望文章能够帮你解决html – 绝对和固定定位在一起所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。