What is position initial in CSS

Question

I was searching for the difference between position:static; and position:initial; when I found the developer mozilla docs page where position:static;'s description is given but position: initial/inherit/unset; are global values . What are those global values meant for?

Answer 1

initial is not only used for position, it is a generic value which you can set it for any property in CSS.

From MDN:

The initial CSS keyword applies the initial value of a property to an element. It is allowed on every CSS property and causes the element for which it is specified to use the initial value of the property.

When using initial value, it will pick the value as defined in the spec as properties default.

Worth noting that this is not supported in IE at all as of now, not even in IE 11, so don't use it unless you dumping support for IE users.

How this works?

Think of it that you have an element p with nested span with color set to orange, and later you use initial for span it will fall to a default value as mentioned in w3c spec.

Demo

span {
  color: red; 
  /* won't make any difference */
}

p {
  color: orange;
}

p span {
  color: initial; 
  /* sets to initial value defined in spec/user-agent */
}

---

Do not confuse it with inherit

inherit is something different all-together compared to initial. Where initial will pick the value from :root, inherit will take the value from it's parent. :root here am talking about initial values defined in the spec and is adapted by browsers.

Demo

p {
  margin-left: 20px;
}

p span {
  margin-left: inherit;
}

inherit is useful when the parent property value is not inherited by default, for example margin. Here, it will pick the value from it's parent declaration and not the :root

Answer 2

The value initial can be used on most properties - it's not unique to position... It simply means to default back to the browser's initial value for that element. For example:

h2 {
    display: inline-block;
}

The above overrides the browser default setting for a h2 element, which is display: block.

Further down the line, if you want to override one particular h2 to back to its default block value, you can do this:

.parent h2 {
    display: initial;
}

Which would put the display back to block for that h2 in this case.

Answer 3

position: initial means that it will catch the default(initial) value so it will catch position: static.

You have to use position: initial when you have changed the default value of the position of an element and you want to back to the default CSS position property for this element.

Answer 4

Initial puts the elements position back to the default. So if we want all <p> elements to have margin except one which we want to be default then we can set that.

div p {
  margin-left: 20px;
}

.special {
   margin-left: initial;
}

See in more detail in this example: https://jsfiddle.net/s9zcsgfs/1/

You can also use it on things like color