CSS position

CSS position

В HTML и CSS

CSS е много силен инструмент за уеб дизайнера. Той е като четката за художника и като длетото за скулптора. Днес ще се запознаем със свойството position. То е онова магическо свойство, което ни позволява да разместваме елементите в дизайна си, да ги позиционираме и да създаваме взаимоотношения между тях.

За кого е този урок?

Начинаещи дизайнери, които имат известно познания по HTML и CSS.

Нека се запознаем с различните стойности на атрибута position и видим какви са разликите между тях:

CSS position: relative

position: relative е стойността, която се дава по подразбиране на най-външния обграждащ елемент в скелета ни. Ако не сме задавали position на никой елемент в дизайна си, то <body> получава position: relative; стойност.

position: relative оказва кой елемент е рамката, спрямо която да се ориентира елемент с position: absolute, разположен в него.

div.position-wrapper {
   display: block;
   position: relative;
   height: 260px;
}

Ето едно CSS правило, с което казваме на position-wrapper да приеме стойност relative. Какво означава това? Това означава, че всеки елемент, разположен в position-wrapper с CSS position: absolute ще се разполага спрямо размера на position-wrapper.

Елементите със стойност position: relative, могат да нямат конкретно зададен размер, което може да е полезно, ако искаме position-wrapper да се преоразмерява, спрямо резолюцията на устройството или спрямо контейнерът му.

CSS position: absolute

Да си дойдем на думата: досега говорихме за контейнери. Сега ще говорим за съдържанието на контейнера. Да си представим следното дизайнерско решение:

position-absolute

HTML кода за това решение изглежда така:

<div class="position-wrapper">
   <a href="#" class="sign-up button">Включи се</a>
   <div class="position-footer">
      <h2>Заглавие на публикацията</h2>
      <h4>Подзаглавие на публикацията</h4>
   </div>
</div>

Бутонът „Включи се“ а просто един <a> елемент, а е разположен на една конкретна позиция. CSS ни дава възможност да го постигнем с position: absolute;

position: absolute оказва на какво отстояние да се разполага елементът, спрямо контейнера със зададено position: relative правило.

position: absolute трябва да е придружен с поне едно правило за разстояние и за да постигнем ефекта от примера: правило за широчина.

По подразбиране, absolute разполага горния си ляв ъгъл в координати 0:0 на relative елемента. Но можем да го разположим където искаме, че четирите свойства top, left, right или bottom. Обикновено не се налага да използваме и четирите – две са напълно достатъчни. Всяко от тези свойства може да приема и негативни стойности. В нашия пример ще използваме bottom  и right:

.sign-up {
   display: block;
   padding: 10px;
   background: #a8264a;
   color: #fff;
   text-align: center;
   font-family: 'Open Sans', sans-serif;
   font-size: 14px;
}

.button {
   position: absolute;
   bottom: 50%;
   right: 20%;
   width: 20%;
}

.position-footer {
   display: block;
   background: url(../images/bgr.png);
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 25px;
   padding: 10px 0;
}

В класът .button казваме на бутона да се позиционира на 20% от долния и на 50% от десния ръб на .position-wrapper. И за да оформим бутона, му казваме да приеме ширина 20% от ширината на .position-wrapper.

position: absolute приема всички мерни единици, признати от CSS: px, em и %. За да може да работим с position: absolute, елементът ни трябва да има зададена стойност display: block.

CSS position: fixed

position: fixed ни позволява да „закрепим“ елемента спрямо някой от ръбовете на браузърния прозорец. Например, position: fixed ни позволява да направим футър, който е винаги видим в долния край на екрана.

Аналогично с position:absolute, position: fixed изисква да му се окаже отстояние, на което да се разположи:

.footer-div {
   display: block;
   position: fixed;
   background: url(../images/bgr.png);
   width: 100%;
   height: 50px;
}

Какво научихме?

position: relative – прави елементът, на който е зададен рамка за всички position:absolute елементи;
position: absolute – чрез top,left, bottom или right можем да позиционираме елемента навсякъде в position: relative рамката;
position: fixed – позиционира елементът на разстоянието, описано от top, left, bottom или right, спрямо браузърния прозорец.

За Гергин Борисов

+359 877080887

Здравейте, аз съм Гергин Борисов, на 24 години от София и се занимавам с уеб и лого дизайн, предпечат и отскоро - с блога си. Занимавам се с дизайн от 2006та година насам, като преди това (от 2004та) работех в сферата на предпечата с баща ми, фотографът Александър Борисов.