Having trouble adding a fade instead of sliding curtains

[PaulOB]

@asasass

How is z-index removed?

Why?

[asasass]

Because I always remove them.

To do that, rearranging the html is usually how it is done.

I wasn’t able to figure it out.

[PaulOB]

@asasass

Because I always remove them.

You shouldn’t do that. They are there for a reason.

Although browsers usually stack elements later in the html on top of previous ones it may not always be the case where new stacking contexts occur and it you want elements layered properly you should explicitly layer them with z-index so there are no mistakes.

Relying on html order for your display is not the job of html. Css controls the display and you need to do it from the css not by moving html around to suit your display purpose. That is in effect the reason that CSS was invented to move control of the display from the html and into the css file.

@asasass

To do that, rearranging the html is usually how it is done

You can move the html above the jacket and then the z-index may not be needed.

<div class="ratio-keeper">
						<div class="wrap hide">
					<div class="video video-frame"></div>
				</div>
        <div class="jacket

However your JS is expecting it to be where it was as the js is traversing the html using NextSibling so will no longer work as it’s not a next sibling but a previous sibling one now. That is also a reason why your JS should not expect something to always be there or at least you should have error checking in place to avoid things breaking. If you want one element to find another element then do not rely on its position in the html but find other ways of linking them together so that they still work if one is moved.