Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does unset value mean in CSS?

I have a megamenu that is absolutely positioned, and as some of its parent elements need to have position:relative, I have to use position:unset on the direct parent. This works in Chrome and Firefox, however IE11 does not support unset or initial.

I can't simply remove the relative positioning from all of the parent elements as that will break other things, but I have to have the megamenu absolutely positioned relative to the page (fixed position does not work). Is there an alternative to unset that will work in IE11?

like image 482
Erica Stockwell-Alpert Avatar asked Jul 02 '19 19:07

Erica Stockwell-Alpert


People also ask

What does color unset do?

Note how the unset property simply resets the color property of the element.

How do I restore the default property value in CSS?

In short, there's no easy way to restore to default values to whatever a browser uses . The closest option is to use the 'initial' property value, which will restore it to the default CSS values, rather than the browser's default styles.

What is initial value CSS?

The initial value of a CSS property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not: For inherited properties, the initial value is used on the root element only, as long as no specified value is supplied.

What is the difference between initial and inherit in CSS?

inherit : Get the property from the parent element. initial : The default value for the property (the browser default). unset : Acts as either inherit or initial. It'll act as inherit if the parent has a value that matches, or else it will act as initial.


Video Answer


1 Answers

unset means

If the cascaded value of a property is the unset keyword, then if it is an inherited property, this is treated as inherit, and if it is not, this is treated as initial. This keyword effectively erases all declared values occurring

In your case, position is not an inherited property so it will always consider initial

Each property has an initial value, defined in the property’s definition table.

For position, it's static So you can simply use position:static and it will behave the same as position:unset


Reference: https://drafts.csswg.org/css-cascade-3/


To make this more generic you have to either use:

  • property:inherit if it's an inhertied propety
  • property:<initial_value> if it's not an inhertied propety. Then you look at the property’s definition table to find the initial value.

enter image description here

https://developer.mozilla.org/en-US/docs/Web/CSS/position

like image 130
Temani Afif Avatar answered Oct 04 '22 19:10

Temani Afif