Соңғы жаңарту: 28.04.2016

CSS элементті орналастыру мүмкіндіктерін береді, яғни біз элементті беттің белгілі бір жеріне орналастыра аламыз.

CSS-те позициялауды басқаратын негізгі сипат - бұл позиция сипаты. Бұл сипат келесі мәндердің бірін қабылдай алады:

статикалық: стандартты элементті орналастыру, әдепкі мән

абсолютті: элементтің орналасу қасиеті статикалық мәнге тең болмаса, контейнер элементінің шекараларына қатысты орналасады.

салыстырмалы : Элемент өзінің әдепкі орнына қатысты орналасады. Жалпы, салыстырмалы орналастырудың негізгі мақсаты элементті жылжыту емес, кірістірілген элементтердің абсолютті орналасуы үшін жаңа бекіту нүктесін орнату болып табылады.

fixed : элемент браузер терезесіне қатысты орналасады, бұл айналдыру кезінде орнын өзгертпейтін бекітілген элементтерді жасауға мүмкіндік береді

Элементке бір уақытта қалқымалы сипат пен статикалықтан (яғни әдепкі түрден) басқа орналастырудың кез келген түрін қолданбауыңыз керек.

Абсолютті позициялау

Браузердің көру терезесінің жоғарғы, төменгі, оң және сол жақ жиектері бар. Осы төрт жиектің әрқайсысы үшін сәйкес CSS қасиеті бар: сол жақ (сол жақ жиек), оң жақ (оң жақ жиек), жоғарғы (контейнердің жоғарғы жиегі) және төменгі (төменгі жиек). Бұл сипаттардың мәндері пикселдер, эмс немесе пайыздармен көрсетіледі. Барлық төрт жағы үшін мәндерді орнату қажет емес. Әдетте, тек екі мән орнатылады - үстіңгі жақтың жоғарғы жиегінен шегініс және сол жақ шетінен шегініс.

СӘЛЕМ ӘЛЕМ

Мұнда абсолютті орналасқан div элементі көру алаңының шекарасының сол жағында 100 пиксель және төменгі жағынан 50 пиксель болады.

Бұл div элементінен кейін басқа элементтердің болуы соншалықты маңызды емес. Бұл div блогы кез келген жағдайда браузердің көру терезесінің шекараларына қатысты орналасады.

Егер абсолютті орналасқан элемент басқа контейнерде орналасса, ол өз кезегінде static мәніне тең емес позиция сипаты мәніне ие болса, онда элемент контейнер шекараларына қатысты орналасады:

Салыстырмалы орналасу

Салыстырмалы орналасу салыстырмалы мәнді пайдаланып орнатылады. Элемент жылжытылатын нақты орынды көрсету үшін бірдей жоғарғы, солға, оңға, төменгі сипаттар қолданылады:

z-индекс қасиеті

Әдепкі бойынша, екі жиек элементі сәйкес келгенде, ішінде анықталған элемент html белгілеусоңғы. Дегенмен, z-индекс қасиеті элементтердің қабаттасуы кезінде олардың ретін өзгертуге мүмкіндік береді. Сипат өзінің мәні ретінде санды қабылдайды. Бұл сипат үшін мәні жоғары элементтер z-индекс мәні төмен элементтердің үстінде пайда болады.

Мысалға:

Енді redBlock блогының стиліне жаңа ереже қосамыз:

RedBlock(z-индекс: 100; орны: абсолютті; жоғарғы: 20px; сол жақ: 50px; ені: 80px; биіктік: 80px; фон түсі: қызыл; )

Мұнда z-индексі 100. Бірақ оның 100 болуы міндетті емес. Екінші блокта z-индексі жоқ және шын мәнінде нөл болғандықтан, біз redBlock z-индекс сипатын нөлден үлкен кез келген мәнге орнатуға болады.

Ал енді бірінші блок екіншіге қойылады, ал басындағыдай керісінше емес.

Семантикалық HTML5 элементтерібраузерлер мен веб-әзірлеушілер үшін олардың мағынасын немесе мақсатын нақты сипаттаңыз.
HTML5 стандарты пайда болғанға дейін барлық беттерді белгілеу негізінен элементтерді қолдану арқылы жүзеге асырылды.