DEV Community

Discussion on: CSS Position Property Explained!

 
ravavyr profile image
Ravavyr

It's not "bad" or "wrong", but you could achieve the same by setting the same image as background to all 3 with a position and size, though I'll admit your solution in this case is simpler. I don't like that it applies the :before 3 times as a big background to the parent, but at the same time it's easier than figuring out the position and size values the other way. You still don't NEED to do it this way.

Show me the other 20 cases.

Thread Thread
 
afif profile image
Temani Afif

You still don't NEED to do it this way. --> give me your solution that can work responsively in all the cases :) (considering the fact that you can have any number of elements and the margin can be different and so on).

Ok I will give you 20 or more ;) stay tuned and I will message you with different examples when I get time.

Thread Thread
 
afif profile image
Temani Afif • Edited

@ravavyr

2) jsfiddle.net/we79jdpg/
3) jsfiddle.net/v9jd2cuz/
4) jsfiddle.net/w80zvxj3/
5) jsfiddle.net/k768weua/
5.1) jsfiddle.net/b8c2j7xz/

Here you go with another 4 uses cases so a total of 5 now in addition to first one I gave in my first comment (I am not couting them 6 since the 5.1 is similar to the 5 ;) ). Explanation inside the code. More will come soon.

Thread Thread
 
afif profile image
Temani Afif

@ravavyr

6) jsfiddle.net/cenmkaj5/
7) jsfiddle.net/3fc7euwo/1/
8) jsfiddle.net/98ntsjrb/ (refer to this article to understand the logic of this code: dev.to/afif/responsive-hexagon-gri...)

Thread Thread
 
afif profile image
Temani Afif
Thread Thread
 
ravavyr profile image
Ravavyr

Still owe me 10 ;)
I do find some of the examples represent the exact same case and these are not commonly used layouts/designs/behaviors.
I do also applaud your perseverance to show me examples :)
You win. There are some cases where it's needed. I'd say 90% [maybe more] of the time you don't need to though.