4 ms·

CSS: Not understanding the behaviour of position:static?

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. My teacher say "it is floating without static...normal flow of document" but I don't get it.

trinovantes 4y ago
position:static is just resetting it to the default value. You should be explicit and use position:unset instead Without 'static' in mobile, it would be position:absolute
kypro 4y ago
The position property basically just tells the element how it should position itself on the page and in relation to other elements. If you add a bunch of elements to a page you'll notice by default those elements will either sit next to each other or below each other depending on if they're inline or block elements, and they'll do so respecting the order you added them to the page. They will never sit on top of each other by default. This is basically what we're talking about when we refer to the "flow layout", or "flow of the document" as your teacher says - it's just the default way elements are arranged and displayed on the page. However, there are times when you might want to be more explicit... For example a dropdown menu would typically sit on top of elements below it. To achieve this we need to apply explicit positioning rules to element so it doesn't follow the default flow layout rules. One of those position rules is `position: absolute` which allows you to explicitly define where the element should be positioned relative to its container. That means with position absolute applied elements can sit on top of each other which is what I think we're probably seeing in your example. `position: static` is just the default and will position the element based on the standard flow layout rules. My guess is that when you're applying `position: static`, you're actually removing a `position: absolute` rule and therefore defaulting back to the flow layout. That's why the elements stop sitting on top of each other when you apply `position: static`. Honestly CSS is just confusing as hell. There are so many weird rules which you'll need to learn. It just takes time to absorb everything mentally.
- shivajikobardan 4y ago
  >Honestly CSS is just confusing as hell. There are so many weird rules which you'll need to learn. It just takes time to absorb everything mentally. True. Any way to pass through this phase?
  - kypro 4y ago
    Not really. The only advice I can give is to start simple and work your way up. I think part of the problem OP is having is that they're trying to do too much at once. Menus are complex and probably not the best way to learn anything. w3schools provide much simpler examples which you can play with to understand the basic concepts, https://www.w3schools.com/css/css_positioning.asp https://www.w3schools.com/css/css_positioning.asp When building more complicated things like menus or cards I like to refer to Bootstrap or the gov.uk design system for examples. I find they get a lot right and both keep things relatively simple.

trinovantes 4y ago

position:static is just resetting it to the default value. You should be explicit and use position:unset instead Without 'static' in mobile, it would be position:absolute

kypro 4y ago

The position property basically just tells the element how it should position itself on the page and in relation to other elements. If you add a bunch of elements to a page you'll notice by default those elements will either sit next to each other or below each other depending on if they're inline or block elements, and they'll do so respecting the order you added them to the page. They will never sit on top of each other by default. This is basically what we're talking about when we refer to the "flow layout", or "flow of the document" as your teacher says - it's just the default way elements are arranged and displayed on the page. However, there are times when you might want to be more explicit... For example a dropdown menu would typically sit on top of elements below it. To achieve this we need to apply explicit positioning rules to element so it doesn't follow the default flow layout rules. One of those position rules is `position: absolute` which allows you to explicitly define where the element should be positioned relative to its container. That means with position absolute applied elements can sit on top of each other which is what I think we're probably seeing in your example. `position: static` is just the default and will position the element based on the standard flow layout rules. My guess is that when you're applying `position: static`, you're actually removing a `position: absolute` rule and therefore defaulting back to the flow layout. That's why the elements stop sitting on top of each other when you apply `position: static`. Honestly CSS is just confusing as hell. There are so many weird rules which you'll need to learn. It just takes time to absorb everything mentally.

shivajikobardan 4y ago
>Honestly CSS is just confusing as hell. There are so many weird rules which you'll need to learn. It just takes time to absorb everything mentally. True. Any way to pass through this phase?
- kypro 4y ago
  Not really. The only advice I can give is to start simple and work your way up. I think part of the problem OP is having is that they're trying to do too much at once. Menus are complex and probably not the best way to learn anything. w3schools provide much simpler examples which you can play with to understand the basic concepts, https://www.w3schools.com/css/css_positioning.asp https://www.w3schools.com/css/css_positioning.asp When building more complicated things like menus or cards I like to refer to Bootstrap or the gov.uk design system for examples. I find they get a lot right and both keep things relatively simple.