CSS:Not understanding the behaviour of position:static?

[polaryeti]

https://codepen.io/pelko/pen/zYaEpqr

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

I'm talking about this line:

 .dropdown,

  .subdropdown {

    position: static;

    width: 100vw;

  }

https://imgur.com/a/US0klgu

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.

[requinix]

This has nothing to do with static and everything to do with CSS rules.

Just because you have media queries in one place does not mean that rules defined elsewhere without media queries are never applied. So: what other CSS do you have being applied to things like .dropdowns?

[polaryeti]

hmm. If you're interested in code, you can check the codepen.. 

[polaryeti]

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

[requinix]

5 hours ago, polaryeti said:

hmm. If you're interested in code, you can check the codepen.. 

(psst I already know the answer)

5 hours ago, polaryeti said:

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

Don't worry about what "static" means. That's not the issue here.

Look at your CSS rules. If you provide that position:static then that takes effect. If you don't provide that position:static then what else will take effect?

[polaryeti]

position:absolute perhaps?

[polaryeti]

I'm not getting emails on this post, can you fix this issue? I've followed this topic.

[requinix]

37 minutes ago, polaryeti said:

position:absolute perhaps?

Correct. That is what's throwing off the layout.

37 minutes ago, polaryeti said:

I'm not getting emails on this post, can you fix this issue? I've followed this topic.

Check your notification settings - specifically, "Change how the notification is sent".