DEV Community

Discussion on: The 6 most common mistakes developers when writing HTML and CSS

Collapse
 
jlipinski3 profile image
Josh Lipinski

Nice, some good points. This is really short-sighted though: "Using display: block and position: absolute (fixed) together". In all browsers? In one browser? What if a user agent is configured differently? Chrome makes changes to their user agent stylesheet all the time. I would never discourage someone to leave out something as important as a display property if they want to explicitly define it. Sure, there are some we've all gotten used to over the years, but by no means would I consider this a "mistake". What if said element is a table and said user wants to absolutely position it as a block element? Be careful with how you are categorizing these as "mistakes".

Collapse
 
melnik909 profile image
Stas Melnikov

In Chrome. IE, Edge, Firefox, Safari, Android, Safari on iOS, UC Browser, Samsung

Collapse
 
glebkema profile image
Gleb Kemarsky • Edited

I have not thought about this before. So I checked it with a CodePen and found this sentence in the Specification:

An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants.

I assume that these words about "new containing block" force browser developers to display absolutely positioned pseudo-element as a block.

Collapse
 
alohci profile image
Nicholas Stimpson • Edited

No they don't. display:inline-block, display:table-cell and display:list-item all establish containing blocks, so any of those would also be consistent with that sentence from the spec. What you are looking for is section 9.7 Relationships between 'display', 'position', and 'float', step 2