html将元素固定位置,html5 – 如何在转换元素中保留元素的固定位置？

这种行为不是一个错误.这实际上是

the specs推荐的行为.

(见

this post by Eric Meyer,或者这个问题

here on SO,接受解决方案只提供同一个迈耶的帖子的链接)

对于那些不知道这个问题的人,以及因为你没有在你的问题中提供一个片段,这里就是一个.

document.addEventListener('click', function() {

document.getElementById('container').classList.toggle('transformed')

}, false);

#bg {

border: 1px solid #AFA;

height: 100%;

width: 100%;

position: fixed;

top: 0;

left: 0;

}

#container {

border: 1px solid #FAF;

height: 50%;

width: 75%;

position: relative;

margin: 0 auto;

overflow: auto;

}

#content {

background: rgba(125, 175, 0, .7);

position: fixed;

width: 100%;

top: 0;

left: 0;

}

.transformed {

transform: translate(0, 5em);

}

.
.
.
.
.
.
.

this is a scrollable paragraph

.
the "fixed" content does scroll with the paragraph

.
.
.
.
.
.
.
.
.
.

you can click to toggle the transformation On/Off

.
.
.
.
.

relatively fixed content

但是,我确实找到了可以帮助其他人面对同样问题的东西.

它不是一个真正的解决方案,因为“fixed”元素只在容器内部(IE浏览器除外,它将真正固定在文档中).但在我的情况下,它实际上是我想要的,也许它对别人也没关系.

如果添加包装器,请设置其高度：100％;宽度：100％;和overflow：auto,然后你的“固定”内容不会随容器滚动.

实际上它不是你容易滚动的容器,而是包装器.因此,您可能希望设置容器的溢出：可见或隐藏,以避免不必要的滚动“不太好”的“固定”元素.

另外,请注意您需要将包装器作为块或内联块元素.

#bg {

border: 1px solid #AFA;

height: 100%;

width: 100%;

position: fixed;

top: 0;

left: 0;

}

#container {

border: 1px solid #FAF;

height: 50%;

width: 75%;

position: relative;

margin: 0 auto;

overflow: visible;

}

#wrapper {

height: 100%;

width: 100%;

overflow: auto;

}

#content {

background: rgba(125, 175, 0, .7);

position: fixed;

width: 100%;

top: 0;

left: 0;

}

.transformed {

transform: translate(0, 50%);

}

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

relatively fixed content