Најважнија ствар приликом дизајнирања веб страница је правилно позиционирање елемената. Ово се лако може урадити коришћењем Таилвинд класа „позиције“. Позиционирање може бити различитих типова, од којих је један статички.
Овај блог ће показати како да статички позиционирате елемент.
Како статички позиционирати елемент у ДОМ – Таилвинд?
Елемент се може статички позиционирати помоћу „ статичне ” класа положаја. Статичка позиција је подразумевана позиција за ХТМЛ елементе. Елементи са „ положај: статичан ” су позиционирани на основу нормалног тока странице, без икаквог ЦСС стила.
Синтакса
Синтакса за примену „ статичне ” класа је:
<елемент класа = 'статичан' > ... < / елемент>
Овде елемент може бити било која ознака на коју се може применити атрибут позиције.
Посетите код за практичну примену статичког позиционирања:
< тело класа = 'текст-центар' >< центар >
< х1 класа = 'текст-зелено-600 текст-5кл фонт-подебљано' >
Пример статичког положаја
< / х1 >
< б >Таилвинд ЦСС Позиција Класа< / б >
< див класа = 'статички текст-лево п-2 м-2 бг-зелено-200 х-48' >
< стр класа = 'фонт-болд' >Статички позиционирано< / стр >
< див >Апсолутно позиционирани елемент< / стр >
< / див >
< / див >
< / центар >
< / тело >
У овом коду:
- “ текстуални центар ” прилагођава садржај ознака <боди> на средину екрана.
- Подесите ' <х1> ” означите зеленом помоћу ознаке “ текст-зелена-600 “, величина текста је подешена на пет пута помоћу „ текст-5×1 ” а фонт је наглашен помоћу „ фонт-болд ”.
- Два ' <див> ” елементи се такође креирају и постављају статичку позицију са леве стране за први „ див ' помоћу ' статички текст-лево ”.
- Додели класе „ п-2 ', ' м-2 ', ' бг-греен-200 ', ' х-48 ” за други див и такође поставите његову позицију на апсолутни доњи лево помоћу „ релативно доле-0 лево-0 ' класа.
Излаз
Сачувајте горњи код у датотеци и прегледајте веб страницу коју је креирао и која ће се приказати као:
Статички позиционирани елемент се помера са нормалним током странице док други елемент задржава своју апсолутну позицију.
Закључак
Да бисте статички позиционирали елемент у ДОМ-у са нормалним током документа, користите „ статичне „класа репног ветра“ положај ' корисност. Овај блог је показао како да позиционирате било који елемент “ статички ” са једноставном практичном демонстрацијом.