Quoted By: >>240152
I'm currently in college working towards my Computer science degree and minor in graphic design, im poor af now........
Hey there web designers of /gd/!
I'm really curious about one aspect of this page's stylesheet: https://www.shyp.com/
I'm talking about the decorative, absolutely positioned, -20 degrees skewed div #line that covers most of the page (highlighted in the screenshot).
In DOM hierarchy #line is a child of body -> .main-content -> .top-container.
(In this simple page body -> .main-content -> .top-container is a div that contains almost every section of the page except the header and the footer.)
Due to #line being sibling with everything directly inside .top-container and #line being absolutely positioned, unlike it's siblings, I would expect #line to render in front of it's statically positioned sibling .hero-container a.k.a. the top section of the page.
What happens instead is that #line somehow renders behind element .hero__content which is located in DOM at body -> .main-content -> .top-container -> .hero-container -> .hero -> .hero__content.
In other words, #line somehow conveniently renders behind it's sibling's grand-child.
As I said, I expect the absolutely positioned #line to render in front of it's statically positioned sibling .hero-container, but apparently my expectation is wrong. It renders inside it's sibling, behind it's sibling's fucking grandchild.
WHY?
