All tips about the position property to avoid common mistakes
Tags: css, webdev, beginners, tutorial
Published: 2022-06-13 15:44:31

Hey folks!

I'd like to talk about the position property! We'll consider all nuances that confuse developers. Also I created the [Live Cheatsheat](https://codepen.io/melnik909/full/poaZxmV). Use it for deep learning!

But before embarking on reading I leave [the link on my Substack newsletter about CSS](https://cssisntmagic.substack.com). You know what to make 😎

Also, thank you so much, my sponsors: Ben Rinehart, Sergio Kagiema, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis. I didn't write this article without their support.

Let's go! 

## position: absolute
### The block values
*Note! I mean the block values are the block, flex, grid and table value*

**1.** When we add position: absolute to all childs they fall out of the parent, i.e it's the height property will be set to 0px.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bv8tkl1whbrepehedr1y.jpg)

If position: absolute is set to the part of childs the parent height is computed depending on the height of childs without position: absolute.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hok9ee3e6odjl00ynoe3.jpg)

**2.** Adding position: absolute doesn't change the display computed value. All values are saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10upm6pubyzfbxf0i6o1.jpg)

**3.** The width and height properties of elements with position: absolute are computed depending on content. Therefore the width property of elements with display: block stops to fill up all available space by the text direction.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap6xey6hkm5kykcnwfzi.jpg)

**4.** Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: absolute to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bd48cvkuqtjagqwm4t1.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebw0ermn9cb3kvp5893i.jpg)

**5.** The padding and border properties work without changes for elements after adding position: absolute.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tb53qrz2wdqzha2y0dj.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fk5tbr30rxvupxu6g2c6.jpg)

Margin Collapsing of the elements with block values stop to work. Vertical margins don't extend beyond the parent. Margins between the elements don't collapse.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzmhtw8t4b5zeb89m1lr.jpg)

**6.** Elements with block values are positioned in a column by default. When adding position: absolute they will be shifted according to a defined algorithm.

The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qqqlkk8dpbhj8q7afi2.jpg)

Elements with position: absolute can't overlap nearby elements without position: absolute that are before them.

The first element with position: absolute will be after the last element without. Other nearby elements with position: absolute will overlap the first.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hp4rcwpyh03h76fd8rh9.jpg)

Elements with position: absolute will overlap following nearby elements because they will shift. The gap of shifting will be equal to the sum of the sizes of the elements with position: absolute.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbyzpovewsrv1r3zofn5.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i84000tr1i8q705bw9fe.jpg)

### The inline values
*Note! I mean the inline values are the inline, inline-block, inline-flex, inline-grid and inline-table value*

**7.** As with block values when adding position: absolute to all childs the parent height is set to 0px.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jm3n1pt1t4clfetj7iy.jpg)

When adding position: absolute to a part of childs the parent height will be computed by depending on the height childs without position: absolute.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqi73qo8w52xkphg7uqx.jpg)

**8.** All inline values will be changed on block values. So the inline and inline-block will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz6vvwmpuk285jmylq5k.jpg)

**9.** By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved but after adding position: absolute the auto value of these properties is changed to pixels.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7weym6c5llbnjgkk0cb.jpg)

**10.** As well as these properties can't be applied to elements with display: inline. But adding position: absolute changes that. They are applied.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac5fzh05tnt1gn2ulh0o.jpg)

But these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: absolute.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08om01k5rhuarmxuumll.jpg)

**11.** The vertical paddings, borders and margins of elements with display: inline stop to extend beyond the parent after adding position: absolute.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wlba68av6795vkkoar2o.jpg)

The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: absolute.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/970t02nptuirvvzgxf7d.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ctyujkf2zu75p7qsqcm.jpg)

**12.** Elements with inline values for the display property are positioned in a row by default. When adding position: absolute they will be shifted in such a way as for elements with block values.

They will be displayed each other. The first element will be the bottom and the last element — the top.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qfw7ydjk52jdxge2cyrc.jpg)

They also can't overlap the elements before them. The first element with position: absolute will be after the last element without. Other nearby elements with position: absolute will overlap the first.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qwin77yd7ufmkw7z6ar.jpg)

When adding position: absolute to some elements remaining elements will be shifted. They will be overlapped as well.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq0xnbaxopsjrkkcy8ts.jpg)

### Flex items
**13.** Flex items stop to stretch by the additional axis when adding position: absolute to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dp6yzz0jzi92oib9drbh.jpg)

**14.**  In the case position: absolute is added to flex items they will be overlapped at each other.

The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11ce33j4p82lmxigpn9e.jpg)

Elements with position: absolute can overlap any nearby elements that might be before or after them. They move to the start position of the axis and line up in a column.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81jndhug6j35x6lzovg9.jpg)

**15.** If we defined the width and height properties to flex items we won't get any changes after adding position: absolute to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1inkza41do07aiium7j.jpg)

**16.** The padding, border and margin properties continue working without changes when adding position: absolute to flex items.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehgls1l8lr72atnr9z5c.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hw3r4agnh9e7l5wsseed.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vvzscnqyd4vu9bgo1s7j.jpg)

## position: fixed
*Folks, I disabled default position relative to the viewport in examples using filter: opacity(1) because that helps me to show another behavior nuances. See the fixed value in the Values section for more details*

### The block values
*Note! I mean the block values are the block, flex, grid and table value*

**1.** When we add position: fixed to all childs they fall out of the parent, i.e it's the height property will be set to 0px.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b67avcmdedh6uugkf6xo.jpg)

If position: fixed is set to the part of childs the parent height is computed depending on the height of childs without position: fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rksut7kd7lyrqmwdb1iw.jpg)

**2.** Adding position: fixed doesn't change the display computed value. All values are saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ud5d12hm5nl526sj4xqz.jpg)

**3.** The width and height properties of elements with position: fixed are computed depending on content. Therefore the width property of elements with display: block stops to fill up all available space by the text direction.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iovhiayne7466fdfc8ej.jpg)

**4.** Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: fixed to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g10nel81x18hpy1detts.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mbsfwhp40cbkso7arek.jpg)

**5.** The padding and border properties work without changes for elements after adding position: fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys91e4u8dbqmqho27ng0.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x59okax8n8aa4qxnqsqi.jpg)

Margin Collapsing of the elements with block values stop to work. Vertical margins don't extend beyond the parent. Margins between the elements don't collapse.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1ad0unxrqa76gcje6id.jpg)

**6.** Elements with block values are positioned in a column by default. When adding position: fixed they will be shifted according to a defined algorithm.

The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjpshix9ochmxdoc72sn.jpg)

Elements with position: fixed can't overlap nearby elements without position: fixed that are before them.

The first element with position: fixed will be after the last element without. Other nearby elements with position: fixed will overlap the first.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jpisjua41o9s88ut7j8.jpg)

Elements with position: fixed will overlap following nearby elements because they will shift. The gap of shifting will be equal to the sum of the sizes of the elements with position: fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/veohh74hvm9x2titq6x5.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1jjntrkal7lcep1abu2.jpg)

### The inline values
*Note! I mean the inline values are the inline, inline-block, inline-flex, inline-grid and inline-table value*

**7.** As with block values when adding position: fixed to all childs the parent height is set to 0px.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yprd67930rfn9w5sp6bv.jpg)

When adding position: fixed to a part of childs the parent height will be computed by depending on the height childs without position: fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdeh2bdohauu7le3wrk0.jpg)

**8.** All inline values will be changed on block values. So the inline and inline-block will be changed to block, inline-flex -> flex, inline-grid -> grid and inline-table -> table.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xzk0b07fg4sjxgz2o2f.jpg)

**9.** By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved but after adding position: fixed the auto value of these properties is changed to pixels.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp152r9j328odnus0yl1.jpg)

**10.** As well as these properties can't be applied to elements with display: inline. But adding position: fixed changes that. They are applied.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93qe8e708vevtmlsgasf.jpg)

But these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4m5pk38b8qxsh8whynvq.jpg)

**11.** The vertical paddings, borders and margins of elements with display: inline stop to extend beyond the parent after adding position: fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bd322dcyurirxn3sjhq.jpg)

The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wr1ewtbxfcso5j1mnmuv.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3kb3nxnqyzgwknkoeyx.jpg)

**12.** Elements with inline values for the display property are positioned in a row by default. When adding position: fixed they will be shifted in such a way as for elements with block values.

They will be displayed each other. The first element will be the bottom and the last element — the top.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb6qz1w721rl58on09k7.jpg)

They also can't overlap the elements before them. The first element with position: fixed will be after the last element without. Other nearby elements with position: fixed will overlap the first.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vq2tfu1ut127xilwhfi.jpg)

When adding position: fixed to some elements remaining elements will be shifted. They will be overlapped as well.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvw3lfuoyo2259p2xrd8.jpg)

### Flex items
**13.** Flex items stop to stretch by the additional axis when adding position: fixed to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53sh5d8qu7vmnhhogbcb.jpg)

**14.** In the case position: fixed is added to flex items they will be overlapped at each other.

The first element in HTML saves a start position. The remaining elements shift in such a way that they are one above the other. The first element in HTML will be the bottom and the last element — the top.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ruyzqh9sm2uc6wqoafys.jpg)

Elements with position: fixed can overlap any nearby elements that might be before or after them. They move to the start position of the axis and line up in a column.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfiho71pc8tmvp28r1h1.jpg)

**15.** If we defined the width and height properties to flex items we won't get any changes after adding position: fixed to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hdvs0919jesac9grgl9.jpg)

**16.** The padding, border and margin properties continue working without changes when adding position: fixed to flex items.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16y8jefqlupynd5ckpoz.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnv3ze2wfiblyez092x5.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f34phi43qya3jcgatlar.jpg)

## position: relative
### The block values
*Note! I mean the block values are the block, flex, grid and table value*

**1.** When we add position: relative to all childs we don't get any changes. The parent height still is computed depending on the childs height.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwvetikpsjpljudgbldn.jpg)

That works if we add position: relative to a part of the childs.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/el3jnu5l0gz5fsjp7xq4.jpg)

**2.** Adding position: relative doesn't change the display computed value. All values are saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4us2xvttnylowu7r05wv.jpg)

**3.** The default working principle of the width and height properties is saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7frqjuw020941ysymot6.jpg)

The element with display: table differs from another values. The width property doesn't fill up all free space. Adding position: relative doesn't affect it.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ge42jtaf300eacnwkxgn.jpg)

**4.** Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: relative to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npj7oy5ichi5c8vfh0mh.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ej6kr4olnq16p5uumf6i.jpg)

**5.** The padding and border properties work without changes for elements after adding position: relative.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bmoqpnrnk492dqdcma4.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qoxe2chu9t28yb3i04d.jpg)

Margin Collapsing of the elements with block values works too. Vertical margins extend beyond the parent. Margins between the elements collapse.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asq4df4cbzl0pzmtz506.jpg)

**6.** When adding position: relative elements with block values are positioned one below the other.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e1jsa0o0uzjp5gjggt4.jpg)![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmlg13o816y4kzukzted.jpg)

Elements with position: relative can't overlap nearby elements without position: relative that are before or after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iult39r4h9nqiimfxfal.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eskvb9n07a2g578hg20p.jpg)

### The inline values 
*Note! I mean the inline values are the inline, inline-block, inline-flex, inline-grid and inline-table value*

**7.** As with block values when adding position: relative to all childs the parent height is computed depending on the childs height.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7elogictzn4b9ll0nin.jpg)

That behavior is saved if to add position: relative to a part of the childs.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3xz5m2bn9dkr74b1uhl.jpg)

**8.** All inline values won't be changed on block values like when adding position: absolute or fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d8w4isbcgshbsarw7uo.jpg)

**9.** By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved without changing the computed value.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvnfdxt6d5g7lw8okcmq.jpg)

**10.** As well as these properties can't be applied to elements with display: inline. Adding position: relative doesn't change that.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o0s7v8a6b2umor9u5bg.jpg)

Also these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: relative.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1et13ea671kbhiz59fup.jpg)

**11.** The vertical paddings, borders and margins of elements with display: inline continue to extend beyond the parent after adding position: relative.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th0xukphusn3fc4rkcsm.jpg)

The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: relative.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z29acfagg9arc8bk151u.jpg)

**12.** Elements with inline values for the display property are positioned in a row by default. When adding position: relative that behavior is saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek1j0ivk81zuysx0lgs2.jpg)

They also can't overlap the elements before and after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3c4yl1k3etwvgee6mm5.jpg)

### Flex items
**13.** Flex items keep to stretch by the additional axis when adding position: relative to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okdc53j3qydooyhhl39l.jpg)

**14.** After adding position: relative flex items are positioned by main axis.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csvnsol8v5l513n9fhjv.jpg)

Elements with position: relative can't overlap any nearby elements that might be before or after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flgqq9c5yzsro6ekkl5c.jpg)

**15.** If we defined the width and height properties to flex items we won't get any changes after adding position: relative to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpzksdgdlwzbnl7we39l.jpg)

**16.** The padding, border and margin properties continue working without changes when adding position: relative to flex items.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b96227trutsqh75j382.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yz6m0pkthrmgkfsoy8e.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csplxm1qrpjktpllvwne.jpg)

## position: static
### The block values
*Note! I mean the block values are the block, flex, grid and table value*

**1.** When we add position: static to all childs we don't get any changes. The parent height still is computed depending on the childs height.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vyudr7ri80ugi44f8zd.jpg)

That works if we add position: static to a part of the childs.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdwyqyj2ib37pckhitb3.jpg)

**2.** Adding position: static doesn't change the display computed value. All values are saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve5hp9skvwg6aypye4jr.jpg)

**3.** The default working principle of the width and height properties is saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8kl8yqichce5d1wapiw.jpg)

The element with display: table differs from another values. The width property doesn't fill up all free space. Adding position: static doesn't affect it.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0kxb6xfttz9m8yugogk.jpg)

**4.** Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: static to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hx4lqsgqvm2z197uzswl.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quptws95lgjl466rf9xr.jpg)

**5.** The padding and border properties work without changes for elements after adding position: static.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w85bli8tfp4l2821mn9f.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r41bc5sotd1cc34kjt8o.jpg)

Margin Collapsing of the elements with block values works too. Vertical margins extend beyond the parent. Margins between the elements collapse.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i240yxreymum5gwpguiw.jpg)

**6.** When adding position: static elements with block values are positioned one below the other.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yapfi1gh39zggca1wdz6.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmg9934awmyrecmu6rwu.jpg)

Elements with position: static can't overlap nearby elements without position: static that are before or after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0svtiblt530aa067k9pk.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8b5w1usohv94lvhri81i.jpg)

### The inline values
*Note! I mean the inline values are the inline, inline-block, inline-flex, inline-grid and inline-table value*

**7.** As with block values when adding position: static to all childs the parent height is computed depending on the childs height.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37micbohr2ph4co7swtp.jpg)

That behavior is saved if to add position: static to a part of the childs.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j6ckuyxdpopgour2aaa.jpg)

**8.** All inline values won't be changed on block values like when adding position: absolute or fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/josm4x7wyog3yskdg71p.jpg)

**9.** By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved without changing the computed value.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnjmozadqsmxlwemmxmn.jpg)

**10.** As well as these properties can't be applied to elements with display: inline. Adding position: static doesn't change that.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/defqesmzqu4098imqhoq.jpg)

Also these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: static.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e47fltrzomu70g8pfx3g.jpg)

**11.** The vertical paddings, borders and margins of elements with display: inline continue to extend beyond the parent after adding position: static.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fopm26o18ar2hwe3n86c.jpg)

The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: static.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82k6bjzc1scpeg9kcs0k.jpg)

**12.** Elements with inline values for the display property are positioned in a row by default. When adding position: static that behavior is saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yo9vxzudtpuzbkhk9fi2.jpg)

They also can't overlap the elements before and after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4c0zzwfuecbfzoon2cq1.jpg)

### Flex items
**13.** Flex items keep to stretch by the additional axis when adding position: static to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlkjtuijt7c0bwvrqesc.jpg)
**14.** After adding position: static flex items are positioned by main axis.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jnxn0o0ewmanp0m6s81.jpg)

Elements with position: static can't overlap any nearby elements that might be before or after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0b4jr4dfoxk3olxt2kd9.jpg)

**15.** If we defined the width and height properties to flex items we won't get any changes after adding position: static to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69f0uwtgk4bwozwp8pr5.jpg)

**16.** The padding, border and margin properties continue working without changes when adding position: static to flex items.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxodgnw40901tw64j9nn.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re84eoxnh02u7nomugo7.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fr8eb7bkkg4de6wswgo.jpg)

## position: sticky
### The block values
*Note! I mean the block values are the block, flex, grid and table value*

**1.** When we add position: sticky to all childs we don't get any changes. The parent height still is computed depending on the childs height.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqrkjt20zbmcho8wma3i.jpg)

That works if we add position: sticky to a part of the childs.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cx4f6td50pzoe5njrat.jpg)

**2.** Adding position: sticky doesn't change the display computed value. All values are saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ujfz4wl59sal288gbbj.jpg)

**3.** The default working principle of the width and height properties is saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4qexnvhgclmrjzlexb9c.jpg)

The element with display: table differs from another values. The width property doesn't fill up all free space. Adding position: sticky doesn't affect it.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3abnp2eciwczys4d3fs5.jpg)

**4.** Since the width and height properties can be applied to elements with block values we don't get some changes when we add position: sticky to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8sae48vpscj9vsqb6ki.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/834m7dsrwy7p9vqyab3g.jpg)

**5.** The padding and border properties work without changes for elements after adding position: sticky.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhl08gjgb0znqhytk55w.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihrtz7jem0s0f8d2d749.jpg)

Margin Collapsing of the elements with block values works too. Vertical margins extend beyond the parent. Margins between the elements collapse.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4aj069t93zzhl6ek108i.jpg)

**6.** When adding position: sticky elements with block values are positioned one below the other.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhadvr31graygwma1qki.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aebinfzv7i59qpcb81q0.jpg)

Elements with position: sticky can't overlap nearby elements without position: sticky that are before or after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/711ditc8z08huej5mnh8.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x47u6vxdc6hjuxth1vvg.jpg)

### The inline values
*Note! I mean the inline values are the inline, inline-block, inline-flex, inline-grid and inline-table value*

**7.** As with block values when adding position: sticky to all childs the parent height is computed depending on the childs height.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atvkq06f8mdkz2muw578.jpg)

That behavior is saved if to add position: sticky to a part of the childs.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pe6qht99aaluxtig86eo.jpg)

**8.** All inline values won't be changed on block values like when adding position: absolute or fixed.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qr254u710et4id55vl6d.jpg)

**9.** By default, the width and height properties of elements with display: inline are computed depending on content. That behavior is saved without changing the computed value.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jd8067mhvn4a8rdoz4c.jpg)

**10.** As well as these properties can't be applied to elements with display: inline. Adding position: sticky doesn't change that.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0udfe10e2udk9j2e1ey.jpg)

Also these properties are applied to elements with all other inline-* values. So we won't get any changes after adding position: sticky.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jobtnhbhj8eim45zdki1.jpg)

**11.** The vertical paddings, borders and margins of elements with display: inline continue to extend beyond the parent after adding position: sticky.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67tgzklvhkzyfwjz5yx2.jpg)

The same properties for the elements with display: inline-* don't extend beyond the parent. So there aren't changes after adding position: sticky.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/edih2iiaiim83ks4958a.jpg)

**12.** Elements with inline values for the display property are positioned in a row by default. When adding position: sticky that behavior is saved.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmrrvpt6fv8zqt5bvucu.jpg)

They also can't overlap the elements before and after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkld8mrx91hp21tmc6ui.jpg)

### Flex items
**13.** Flex items keep to stretch by the additional axis when adding position: sticky to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cchbceo4cshqxudnktar.jpg)

**14.** After adding position: sticky flex items are positioned by main axis.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/coz52ko134hyzwm6u1j9.jpg)

Elements with position: sticky can't overlap any nearby elements that might be before or after them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgfyxi7sjv5l4i7vvuzd.jpg)

**15.** If we defined the width and height properties to flex items we won't get any changes after adding position: sticky to them.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xihot2pkwbdgf1p0yx6.jpg)

**16.** The padding, border and margin properties continue working without changes when adding position: sticky to flex items.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8tbvde8e6acqhtu66jmp.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvj0apno9zkg20cxuejf.jpg)
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kganhcxti1wr8yb97bw.jpg)