How to improve css image?

Question

css

Hello everyone, I'm starting to do CSS and made such a simple sketch - brackets in brackets .
The problem is that the structure consists of several layers superimposed on each other, while they are positioned relative to the browser window.
The question is how to make sure that all elements are located relative to some common container? No matter how I experimented with positioning, everything floats away.

Answer 1

codepen.io/anon/pen/Lztpo
absolute is positioned relative to relative. while absolute must be inside the relative container. Even your ID names hint at such a structure outer - wrapper and inner inner block.

Answer 2

position: relative will solve your problem.
Since you're learning anyway, a few implementation criticisms:
- id - don't use id, don't use them at all. This is considered bad practice. Tales about the fact that selectors with id work faster are tales. It's all about the specificity of the selector, and how much it will take to check the selector to wander through the tree, selectors are marked up for each element, so you need to try to do everything so that the browser does not have to go very far up the flattery tree to check.
If you use before/after pseudo-elements, you can get by with 2 elements.

Answer 3

the fact of the matter is that the layers float away

Answer 4

jsfiddle.net/iiil/ubRhj/1