Transition does not work when position is fixed

Question

Click on the icon in the encoder to see the result.

I want the container to be fixed. However, when the container is fixed, switching to the X icon does not work. When I press the menu button, the X icon has no transition.

You need to uncomment a fixed position to see how it affects the X.

https://codepen.io/anon/pen/dzxaGb

#container { display: none; /* Uncomment the position fixed */ /* position: fixed; */ height: 100%; width: 100%; background: blue; z-index: 9999; transition: all 0.2s linear; } #menu, #close { position: absolute; top: 4%; right: 2%; transition: all 0.3s linear; font-size: 3em; } #close { opacity: 0; } 

Answer 1

When you click on the menu icon, you can temporarily change the position of the container. This is not the best, but it works.

Add this code:

 menu.onclick = function() { container.style.position = 'static'; } x.onclick = function() { container.style.position = 'fixed'; }