CODEWITHSUNDEEP
htmlcssresponsive-design
Imnotapotato
Imnotapotato

Reputation: 5808

How to overlay one div over another div over an other div

I'd like to know if using position:absolute like mentioned in this post: "How to overlay one div over another div" works the same for 3 divs over an other. Is it right to work with a whole absolute page? Can't this cause problems when building a responsive website?

Upvotes: 0

Views: 498

Answers (1)

brennanyoung
brennanyoung

Reputation: 6524

These approaches need not cause problems for responsive design. No more than anything else, at least.

For responsive design, make no assumptions about actual pixel dimensions, except perhaps to indicate breakpoints in your media queries. Another case where pixel values are useful is when making 'hairline' borders. In almost all other cases use relative units such as em, rem, %, vh, vw... It's easier than you might imagine, and only requires a little discipline in the beginning to get your mind in the right place.

Also, make your first design for the smallest screen and work up from there. It's much easier than doing it the other way round.

Final tip: Use box-sizing:border-box. I usually put this under the universal selector, like this:

* {box-sizing:border-box;}

This will include borders and padding in the width and height. It just makes the whole business of using relative values much easier and quite intuitive. Good luck!

Upvotes: 1

Related Questions