Елементи за позициониране на уеб страница със свойството CSS Position

Април 24, 2024

Преди да каскадирате стиловите таблици, вие бяхте ограничени в контрола, който сте имали над позицията на обекти на вашата уеб страница. Можете да използвате HTML таблицата, за да контролирате позиционирането леко, но това не беше много точно. Сега с CSS можете да имате прецизен контрол върху това как всеки елемент е поставен на вашата уеб страница.

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

Ширина и височина на браузъра
В началото може да мислите, че това се отнася до отворения прозорец на браузъра. Но наистина се отнася до целия браузър, включително контролите и бутоните.
Ширина на живо и височина
Това е терминът за зоната на показване на браузъра. Не включва контролите.
Ширина и височина на документа
Това е цялата ширина и височина на вашата уеб страница. Ако тези размери са по-големи от широчината и височината на живо, тогава браузърът ще покаже ленти за превъртане, ако е необходимо.

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

статичен
Това е по подразбиране. Освен ако не посочите друго за елемент, браузърът ще използва статично позициониране. Както звучи, при статично позициониране не можете да препозиционирате елементи на уеб страницата. И така, как браузърът определя къде да постави всеки обект на вашата уеб страница? Той позиционира всеки елемент в реда, в който се намират във вашия HTML код. Ако имате изображение на лого, след това приветствие и след това известие за авторски права във вашия HTML, браузърът ще ги постави на уеб страницата в този ред. Не можете да преместите поздрава над изображението на логото.
относителен
Относителното позициониране работи същото като статичното, тъй като редът на елементите в HTML кода контролира потока на елементите на страницата. Можете обаче да използвате относително позициониране, за да контролирате позицията на даден елемент спрямо другите елементи на уеб страницата.
абсолютен
Когато използвате абсолютно позициониране с елемент, това ще направи този елемент независим от останалата част от уеб страницата. Тъй като разположението му вече не се определя от реда на HTML, ще трябва да използвате X и Y координати, за да позиционирате елемента.
Фиксирана
Това работи същото като абсолютно позициониране. Елементът с фиксирано позициониране обаче няма да се превърта с уеб страницата. Това е приятна функция, която да използвате за лого или меню, които искате да останат видими, докато страницата се превърта нагоре.

Инструкции Видео: CSS position | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy (Април 2024).

Елементи за позициониране на уеб страница със свойството CSS Position, HTML, CSS, свойство за CSS позиция, статично позициониране, относително позициониране, абсолютно позициониране, фиксирано позициониране, как да позиционирате елементи на уеб страница, използвайте CSS за позициониране на елементи на уеб страница

Предишна Статия

Следваща Статия

Свързани Статии

компютри

Прехвърляне на файлове на вашия нов компютър

Април 2024

Най-накрая имате чисто нов компютър или лаптопа, за който сте мечтали. Изглежда страхотно на бюрото ви, работи като мечта (както обикновено правят новите компютри), но има само един малък проблем:...

компютри

Игрална компания BlueFang

Април 2024

През есента на 2009 г. бяхме достатъчно привилегировани, за да имаме възможността да се срещнем с персонала на BlueFang, създателите на Zoo Tycoon и поредицата World of Zoo. Денят доказа колко...