.dropdown,
.subdropdown {
position: static;
width: 100vw;
}thank you.pbuk said: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.
Position:static is a CSS property that specifies the default positioning of an element. This means that the element will be positioned according to the normal flow of the document.
Elements with position:static do not move because this property does not allow for any positioning or movement of the element. It simply follows the normal flow of the document and is not affected by other positioning properties or values.
Position:static is different from other positioning properties, such as position:absolute or position:relative, because it does not allow for any movement or positioning of the element. It is the default position and cannot be changed.
Position:static should be used when you want an element to follow the normal flow of the document and not be affected by any other positioning properties. It is often used as the default position for elements and does not require any additional CSS code.
Yes, position:static can be overridden with other positioning properties, such as position:absolute or position:relative. However, it is important to note that elements with position:static do not have a z-index, so they will always be behind elements with a z-index value.