As a beginner in CSS, I tackle the challenges of learning it every day. Despite feeling clumsy and not naturally adept at it, my determination is strong (although sometimes my brain feels like an old computer on the verge of overheating). My current goal is to figure out how to code a group of individual modules that share the same style and are arranged in two rows of two columns inline. Each module should be represented as a paper stack utilizing z-index and absolute positioning.
To illustrate what I have in mind, I created this image:
In my attempt, I experimented with display:inline for the top div, but it required me to code separate, overlapped divs for each module using position:absolute and specific coordinates. Ideally, I would like to create a single module with overlapping sections that can be duplicated simply by applying the same class (without the need to adjust the coordinates of every individual module).
If anyone has a solution or suggestion on achieving this layout using CSS, I would greatly appreciate your input. Thank you in advance :)