Question

相关问题： 'transform3d' not working with position: fixed children

TL; DR：这是一个jsfiddle。基本上紫色元素应该在两个橙色条的顶部，它应该是整个视图屏幕。

整个故事（在知道问题所在之前）：

我有以下情况，我的页面顶部有一个工具栏，底部有一个工具栏，有一些内容。在我之间的内容中我希望有一个可以全屏显示的元素，重叠视图屏幕上的所有内容（让我们说整个屏幕都是黑色）。

<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之外，当我需要它重叠所有内容并在我不重复时将其移回内部？

所有这些都是为了将视频“全屏”合并在一起。

编辑：看起来你们所有人建议的以及我在问之前尝试过的方法，就是让元素固定并拉伸它，应该有效。但在我的情况下，由于某种原因，它没有。 #contents元素具有一些css属性，可防止固定元素比#contents大小拉伸得更远。如果我在#fullscreen上放置顶部：0，它将位于#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;
}

Answer 2

我不确定我完全理解你的问题，但我会尝试......

对于您在此处发布的html，所有HTML元素的位置都是绝对/固定的。你的情况的主要不同是每个元素的上下文

positon：fixed

具有位置固定属性的元素具有窗口的上下文并且浮动它们的位置。所以z-index值是相对于具有窗口上下文的其他元素。

positon：绝对

具有位置绝对属性的元素具有最近的相对容器的上下文，在您的情况下，对于您的元素，最近的相对容器是窗口。

如果我理解你的话，你的情况下的解决方案只是应用这种造型：

#fullscreen {
  left: 0;
  top: 0;
  width: 100%; // of the window
  height: 100%;// of the window
  position:fixed;
  z-index: 999;
}

Answer 3

使用固定位置可以达到预期的效果。

#fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

默认情况下，所有元素都是位置静态，然后按顺序呈现。如果您将位置声明更改为固定，则可以手动设置它的顶部，左侧，右侧和底部位置。

transform：translate3d使固定位置元素充当绝对定位元素

3 个答案: