Jump to content

CSS:Not understanding the behaviour of position:static?


Go to solution Solved by polaryeti,

Recommended Posts

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.

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?

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?

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".

image.png

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.