Ангел Арънски · дизайнер Цветове
Изтегляне 97.77 Kb.
|
- Навигация на страницата:
- Позициониране
- Padding | Вътрешни отстояния
| Позициониране
position: absolute; position: relative; position: fixed; left: 20px; top: 20px; z-index: 1000; z-index: 1010; При абсолютна, релативна или фиксирана (точни позиции) - ще може да управлявате позицията с left, top или right, и bottom. При абсолютна, то ще променяте позицията спрямо най-близкия родителски елемент, който има точна позиция. Ако няма такъв, то това ще е BODY (който има точна позиция по подразбиране) и position:absolute; left:0px; top:0px; ще е в горния ляв ъгъл на страницата. Интересното при абсолютните позиции, е че те не оставят 'следи' там където са били поставени в нормалния ред на HTML елементите, докато релативните, оставят. position:relative Ако искаме да направим някой от родителските контейнери начало на абсолютните позиции на вътрешните елементи, то просто слагаме position:relative в него. Това няма да го размести по никакъв начин. Едно от най-честите приложения на това е: display: block; width: 900px; margin: 50px auto; position: relative; Това ще направи контейнер с широчина 900 пиксела и ще го центрира в страницата ни, след което ще го направи начало на всички вътрешни елементи с позиция absolute. Ако сложим в него елемент лого с този CSS: position: absolute; left: 10px; top: 10px; То той ще е позициониран с отстояние 10px от горния ляв ъгъл на нашия контейнер и при намаляване на страницата ще си остава там, докато контейнера си остава в центъра. Ако един елемент излиза над друг елемент, а не искаме това да се случва. То им слагаме z-index като на този, който искаме да е отгоре, трябва да е с по голямо число. position:relative; z-index:100; Но пък ако това е елемент без точна позиция, ние ще трябва да му сложим такава или z-index няма да работи. Padding | Вътрешни отстояния padding: 10px 20px Ще сложи вътрешно отстояние от 20px от ляво и от дясно, както и 10px от горе и от долу. padding: 10px 20px 30px 40px По часовниковата стрелка: Горе - 10px; Дясно - 20px; Долу - 30px; Ляво - 40px. Изтегляне 97.77 Kb. Сподели с приятели:
|