transform: translate3d makes fixed position element act as an absolute positioned one

Question

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

TL;DR: Here is a jsfiddle. Basically the purple element should be on top of the two orange bars, it should be the whole view screen.

The whole story (before knowing what the problem was):

I have the following situation, one toolbar on top of my page and one on bottom and some contents between. In that contents between I would like to have an element that could be full screen if I want, overlapping everything on the view screen (lets say make the whole screen black).

<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>

What I know is that this seems impossible due to how stack order works.The #fullscreen element can only be as big as the #contents element is. Am I correct on this?

Bare in mind that the toolbar elements can not be manipulated.

Is the solution to just move the #fullscreen element outside of the #contents div when I need it to overlap everything and move it back inside when I don't?

All this is in order to hack together a video "fullscreen".

EDIT: It seems that what you all have suggested and what I did try before asking, that is to make the element fixed and stretch it, should work. However in my case for some reason it doesn't. The #contents element has some css property that prevents the fixed element to stretch further than the #contents size. If I put top:0 on the #fullscreen it will got to the top of the #contents and not the document/body. It seems to act as if it is not fixed but absolute.

EDIT2: Found the culprit. The #contests has transform: translate3d(0%,0,0px). Need a way to circumvent this now without touching the #contents css properties.

score 0 · Answer 1 · answered Feb 28 '17 at 08:59

You need to set the position to fixed. It will then ignore the size restraints of its parent.

So you could use JavaScript/jQuery to add a class that contains the CSS for fullscreen.

For example using jQuery:

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

CSS

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

score 0 · Answer 2 · answered Feb 28 '17 at 09:08

I am not sure that i am fully understood your question but I will try..

for the html that you posted here all the HTML elements are with position absolute/fixed. the main different for you situation is the context of each element

positon: fixed

elements with position fixed property have the context of the window and float in they place. so the z-index value is relative to other elements with the context of the window.

positon: absolute

elements with position absolute property have the context of the closest relative container, in your situation also for yours elements the closest relative container is the window.

and the solution in your situation if i understood you well is just apply this styling:

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

score 0 · Answer 3 · answered Feb 28 '17 at 09:14

Using position fixed you can achieve the desired effect.

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

By default all elements are position static which will render then in order. If you change the position declaration to fixed you can manual set it's position with top, left, right and bottom.

transform: translate3d makes fixed position element act as an absolute positioned one

3 Answers3