Web Dev full-stack [LAMP] since 2005, but much heavier on the JS stuff these days.
Jack of all Stacks, Master of some.
Always looking to learn new things. Always glad to help out, just ask.
Location
Atlanta, GA
Education
B.S. in Biochemistry 2004, M.S. in Computer Information Systems 2007
I have to say here that ANY time you use position:absolute, it should be done in relation to its parent which should be given relative position unless the parent itself is also absolute or fixed.
There is zero reason you ever need to put something absolute to anything other than its own parent and following this rule also saves you a thousand headaches in the future.
Another rule is that anything positioned absolute should also have a top/bottom and left/right placement defined to avoid crossbrowser issues [mostly safari these days and IE of course]
There is zero reason you ever need to put something absolute to anything other than its own parent --> sorry but I disagree with this and I can give you a ton of examples where we have to position the element in relation to another ancestor which is not the parent element. Here is a random example I just found: stackoverflow.com/a/63585953/8620333 .. If I have time I can give you no less than 20 different uses cases where we don't position the position:absolute element in relation to its parent.
Web Dev full-stack [LAMP] since 2005, but much heavier on the JS stuff these days.
Jack of all Stacks, Master of some.
Always looking to learn new things. Always glad to help out, just ask.
Location
Atlanta, GA
Education
B.S. in Biochemistry 2004, M.S. in Computer Information Systems 2007
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.
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.
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.
Web Dev full-stack [LAMP] since 2005, but much heavier on the JS stuff these days.
Jack of all Stacks, Master of some.
Always looking to learn new things. Always glad to help out, just ask.
Location
Atlanta, GA
Education
B.S. in Biochemistry 2004, M.S. in Computer Information Systems 2007
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I have to say here that ANY time you use position:absolute, it should be done in relation to its parent which should be given relative position unless the parent itself is also absolute or fixed.
There is zero reason you ever need to put something absolute to anything other than its own parent and following this rule also saves you a thousand headaches in the future.
Another rule is that anything positioned absolute should also have a top/bottom and left/right placement defined to avoid crossbrowser issues [mostly safari these days and IE of course]
There is zero reason you ever need to put something absolute to anything other than its own parent --> sorry but I disagree with this and I can give you a ton of examples where we have to position the element in relation to another ancestor which is not the parent element. Here is a random example I just found: stackoverflow.com/a/63585953/8620333 .. If I have time I can give you no less than 20 different uses cases where we don't position the position:absolute element in relation to its parent.
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.
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.
@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.
@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...)
@ravavyr
Two recent SO questions I answered:
9) stackoverflow.com/a/66952263/8620333
10) stackoverflow.com/a/66958638/8620333
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.