我正在尝试修复一个div,使其始终保持在屏幕顶部,使用:
position: fixed;
top: 0px;
right: 0px;
然而,div位于居中的容器内。当我使用position:fixed时,它会相对于浏览器窗口修复div,例如它位于浏览器的右侧。相反,它应该相对于容器固定。
我知道position:absolute可以用来固定相对于div的元素,但是当您向下滚动页面时,元素会消失,并且不会像position:fixed那样固定在顶部。
有没有破解或解决方法来实现这一点?
简短回答:没有。(现在可以使用CSS转换。请参阅下面的编辑)
长篇大论:使用“固定”定位的问题在于,它会使元素脱离流程。因此,它不能相对于父对象重新定位,因为它好像没有父对象。但是,如果容器具有固定的已知宽度,则可以使用以下内容:
#fixedContainer {
position: fixed;
width: 600px;
height: 200px;
left: 50%;
top: 0%;
margin-left: -300px; /*half the width*/
}
http://jsfiddle.net/HFjU6/1/
编辑(2015年3月):
这是过时的信息。借助CSS3变换的魔力,现在可以将动态大小(水平和垂直)的内容居中。同样的原则也适用,但您可以使用translateX(-50%)来代替使用边距来偏移容器。这不适用于上面的边距技巧,因为除非宽度是固定的,否则不知道要偏移多少,并且不能使用相对值(例如50%),因为它将相对于父元素,而不是它所应用的元素。transform的行为不同。它的值与它们所应用的元素有关。因此,50%的转换表示元素的宽度的一半,而50%的边距表示父元素的宽度。这是一个IE9+解决方案
使用与上述示例类似的代码,我使用完全动态的宽度和高度重新创建了相同的场景:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 0%;
transform: translateX(-50%);
}
如果您希望它居中,也可以这样做:
.fixedContainer {
background-color:#ddd;
position: fixed;
padding: 2em;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
演示:
jsFiddle:仅水平居中jsFiddle:水平和垂直居中最初的功劳是用户aaronk6在这个回答中向我指出了这一点
事实上,这是可能的,而公认的答案只涉及集中,这很简单。此外,您真的不需要使用JavaScript。
这将允许您处理任何情况:
如果您想在position:relative容器中定位:absolute,请按照您的意愿设置所有内容,然后在div中创建一个新的固定位置div,其位置为:absolate,但不要设置其顶部和左侧的财产。然后,它将被固定在相对于容器的任何位置。
例如:
/*主要场地主体*/.包装器{宽度:940px;边距:0自动;位置:相对;/*确保绝对定位的子元素相对于此*/}/*要固定位置的元素的绝对定位包装*/.固定包装{宽度:220px;位置:绝对;顶部:0;左:-240px;/*将其移到网站正文的左侧,留下20px的空白*/}/*要固定其位置的元素*/.固定{宽度:220px;位置:固定;/*不要设置顶部/左侧*/}<div class=“wrapper”><div class=“fixed wrapper”><div class=“fixed”>这里的内容将是固定位置,但在网站主体左侧240像素。</div></div></div>
可悲的是,我希望这个线程可以解决我的问题,Android的WebKit将框阴影模糊像素渲染为固定位置元素的边距,但这似乎是一个bug。
答案是肯定的,只要在将div位置设置为固定后不设置left:0或right:0。
http://jsfiddle.net/T2PL5/85/
签出侧边栏div.它是固定的,但与父级相关,而不是窗口视图点。
正文{背景:#ccc;}.包装器{边距:0自动;高度:1400px;宽度:650px;背景:绿色;}.侧边栏{背景色:#ddd;浮动:左侧;宽度:300px;高度:100px;位置:固定;}.主要{浮动:右侧;背景色:黄色;宽度:300px;高度:1400px;}<div class=“wrapper”>包装器<div class=“sidebar”>侧边栏</div><div class=“main”>main</div></div>