Not understanding the behaviour of position:static?

[shivajikobardan]

TL;DR Summary

position:static in dropdown and subdropdown.

I'm learning responsive design. (Make width <500px and see)

I'm talking about this line:

.dropdown,
  .subdropdown {

    position: static;

    width: 100vw;

}

This is the behaviour I'm getting with and without position:static. But I fail to understand why? All information that I've about position:static is that it doesn't accept Top,Bottom,Left,Right values.

 

[shivajikobardan]

position:static places the document in default. the default is one at the top of other. this sounds reasonable to me.

 

[pbuk]

position: static is the default, there is no need to set position: static unless it is to override a different setting of position with a lower priority.

Which is exactly what is happening in the example shown, in the default CSS you are setting position: absolute on both .dropdown and .subdropdown elements, and you are setting left: 100% on subdropdown so it hangs off to the right. However in a media query which takes effect when the display width is <= 500px you are overriding this to reset position to its default value of static so now left:100% doesn't do anything and everything stacks vertically. If you remove position: static from the media query the subdropdown breaks on mobile.

 

[shivajikobardan]

position: static is the default, there is no need to set position: static unless it is to override a different setting of position with a lower priority.

Which is exactly what is happening in the example shown, in the default CSS you are setting position: absolute on both .dropdown and .subdropdown elements, and you are setting left: 100% on subdropdown so it hangs off to the right. However in a media query which takes effect when the display width is <= 500px you are overriding this to reset position to its default value of static so now left:100% doesn't do anything and everything stacks vertically. If you remove position: static from the media query the subdropdown breaks on mobile.

thank you.