javascript - 变换 : translate3d makes fixed position element act as an absolute positioned one

Question

Relative question: 'transform3d' not working with position: fixed children

长话短说:这是一个jsfiddle .基本上紫色元素应该在两个橙色条的顶部，它应该是整个 View 屏幕。

整个故事(在知道问题出在哪里之前):

我有以下情况，一个工具栏在我的页面顶部，一个在底部，中间有一些内容。在这些内容之间，如果我愿意，我希望有一个可以全屏显示的元素，将所有内容重叠在 View 屏幕上(比如说让整个屏幕变黑)。

<div id="top-toolbar" style="position: absolute; z-index: 1"></div>
<div id="contents" style="position: absolute; z-index: 1">
    <div id="fullscreen" style="position:fixed; z-index: 999"></div>
</div>
<div id="bottom-toolbar" style="position: absolute; z-index: 1"></div>

我所知道的是，由于堆栈顺序的工作方式，这似乎是不可能的。#fullscreen 元素只能与 #contents 元素一样大。我对此是否正确？

请记住，工具栏元素无法被操作。

解决方案是在我需要覆盖所有内容时将#fullscreen 元素移到#contents div 之外，而在不需要时将其移回内部吗？

所有这些都是为了拼凑出一个“全屏”视频。

编辑:看来你们所有人的建议和我在询问之前所做的尝试，即使元素固定并拉伸(stretch)它，应该可行。但是就我而言，出于某种原因它没有。 #contents 元素具有一些 css 属性，可防止固定元素拉伸(stretch)得超过 #contents 大小。如果我将 top:0 放在 #fullscreen 上，它将到达 #contents 的顶部，而不是 document/body 。它看起来好像不是固定的而是绝对的。

EDIT2:找到罪魁祸首。 #contests 有 transform: translate3d(0%,0,0px)。现在需要一种方法来避免这种情况，而无需触及 #contents css 属性。

Answer 1

您需要将位置设置为fixed。然后它将忽略其父项的大小限制。

因此您可以使用 JavaScript/jQuery 添加一个包含全屏 CSS 的类。

例如使用 jQuery:

$('#fullscreen').addClass('fullscreen');

CSS

.fullscreen {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}