Css 绝对/固定位置:防止项目滚动

Css 绝对/固定位置:防止项目滚动,css,css-position,Css,Css Position,我试图找出CSS中的绝对/固定位置,将徽标放在网页的右下角,并使其保持在那里,即使页面内容滚动。我已经完成了一半,但是现在需要停止在浏览器窗口很小的情况下徽标在页面上移动得太高 我已经创建了一张图纸,并简要说明了我希望它如何工作,并将它们以pdf格式放在以下链接中: 有人能帮我吗 Gary我认为仅仅使用简单的CSS是不可能的。(至少没有使用一些疯狂的CSS黑客)。但是使用jquery,这应该是可能的: jQuery有一些粘性/固定位置的插件,比如 但我不知道他们如何或是否正在解决你面临的问题。

我试图找出CSS中的绝对/固定位置,将徽标放在网页的右下角,并使其保持在那里,即使页面内容滚动。我已经完成了一半,但是现在需要停止在浏览器窗口很小的情况下徽标在页面上移动得太高

我已经创建了一张图纸,并简要说明了我希望它如何工作,并将它们以pdf格式放在以下链接中:

有人能帮我吗


Gary

我认为仅仅使用简单的CSS是不可能的。(至少没有使用一些疯狂的CSS黑客)。但是使用jquery,这应该是可能的: jQuery有一些粘性/固定位置的插件,比如 但我不知道他们如何或是否正在解决你面临的问题。最糟糕的情况是你必须自己写一个脚本。即使我不能提供一些代码,也希望这对我有所帮助

这里的问题基本相同:

因此,徽标应该是

位置:固定的
,但前提是视口高度大于预定义的最小值。您可以通过媒体查询实现这一点:

@media screen and (min-height: 300px) {
    #logo {
        position: fixed;
        /* your other styles */
    }    
}

现场演示:(降低浏览器窗口高度,直到图像与灰色DIV碰撞)

哇-太快了,谢谢!CSS只是将div设置为:position:fixed;左:720px;底部:0px;谢谢,斯特凡和西姆·维达斯——非常感谢你们在这方面的帮助。这一天的大部分时间都让我抓狂!期待您的演示,Šime Vidas…PS-如果有帮助,徽标顶部与窗口顶部的距离不应超过450px。很好。浏览器兼容性如何?@Stefan除了IE8/7之外,其他都是。不过,IE有一个新的功能。@Šime Vidas-非常感谢您的支持。在某种程度上,我已经做到了,但有两个问题。首先,我需要与IE7/8兼容,但不确定如何实现polyfill。我是一个编程新手-你能不能把它添加到你的演示中,让我看看怎么做?第二,当高度很小时,徽标处于绝对位置,当我滚动时,它不会向下移动。有可能做到这一点吗?(也就是说,当用户向下滚动页面时,至少要将其固定到绝对顶部位置?)。再次感谢你,加里。@user1392546我想我知道你的意思。但是,解决方案取决于HTML结构和现有CSS代码。请创建一个简单的演示页面,我将对该页面进行增强以使其正常工作。@Šime Vidas对此表示感谢。我在这里放了一个演示页面:。我还写了一份备忘录,以澄清我希望这项工作如何进行,如下所示:。再次感谢你在这方面的帮助-我期待着看到你的想法。