Confusion with position & display


1) If a position:relative element doesn't have any properties moving it, won't it behave just like if it was position:static?
2) Display & position are intimately connected because they both affect how elements show up on a webpage. Does anyone have a example links on how these 2 concepts interact when showing a webpage? For example, here are examples of how a webpage looks for each display value & each position value.


yes, then it is the same as static, with propertys it can behave very different.

Yes, they are, but you will find that many display property's behave roughly the same with different positions.

That last request i am not going to do, here is why. all possible display values (some of these are experimental but point still stands:

display: none;

display: inline;
display: block;
display: contents;
display: list-item;
display: inline-block;
display: inline-table;
display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: ruby;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container ;
display: run-in;

/* Global values */
display: inherit;
display: initial;
display: unset;

all possible display values:

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: unset;

that we require to explain 6x20 (? more ?) = 120 examples, i am sorry, too many. You can read about position and display on MDN, i hope to have answered your question


that is quite alot of combinations. it sounds like understanding this relationship will come mostly from experience working with them. Thanks!


yea, it is. But you will find many values behave roughly the same with different positions.