Как улучшить css изображение?

Question

[Никита]

Привет всем, начинаю заниматься CSS и сделал такую простенькую зарисовку - брекиты в брекитах.
Проблема в том что структура состоит из нескольких слоев наложенных друг на друга, при этом они позиционируются относительно окна браузера.
Вопрос в том как сделать что-бы все элементы располагались относительно какого-то общего контейнера? Как ни экспериментировал с позиционированием все уплывает.

Answer 1

[Alexey Svirschevskiy]

codepen.io/anon/pen/Lztpo

absolute позиционируется отностельно relative. при этом absolute должны находится внутри relative контенера. У Вас даже названия ID намекают на такую структуру outer - обертка и inner внутренний блок.

Comments

[Никита]

Спасибо, релатив применял не так

[Никита]

хотя прри переносе в обычные файлы снова все поплыло(

Answer 2

[Сергей Протько]

position: relative решит вашу проблему.

Раз уж вы всеравно учитесь, то немного критики по реализации:
- id - не используйте id, вообще не используйте их. Это считается плохой практикой. Байки про то что селекторы с id работают быстрее - это байки. Все дело в специфичности селектора, и сколько нужно будет для проверки селектора бродить по дереву, селекторы размечаются для каждого элемента, так что нужно стараться делать все так, что бы браузеру не приходилось сильно далеко в верх по дереву лесть для проверки.

Если использовать псевдоэлементы before/after, можно обойтись 2-мя элементами.

Comments

[Никита]

@Fesor как можно научится более сложным вещам в CSS? всяким тонкостям. все что не возьмусь читать - только база. те же css3 градиенты, тени, анимация. не могу найти, что можете посоветовать?

Answer 3

[Никита]

в том то и дело что уплывают слои

Answer 4

[Юрий Лобанов]

jsfiddle.net/iiil/ubRhj/1