Դիրքավորումը մի փոքր ավելի հասկանալի է կիրառական օրինակների վրա։ Հաջորդիվ էջի իրական դիրքավորմանը մոտիկ օրինակ է։
.container {
position: relative;
}
nav {
position: absolute;
left: 0px;
width: 200px;
}
section {
/* position is static by default */
margin-left: 200px;
}
footer {
position: fixed;
bottom: 0;
left: 0;
height: 70px;
background-color: white;
width: 100%;
}
body {
margin-bottom: 120px;
}
section
-ի margin-left
ոճը ապահովում է ազատ տարածություն nav
-ի համար։ Հակառակ դեպքում բացարձակ և ստատիկ էլեմենտները իրար վրա կբարձրանան։
Lorem Ipsum-ը տպագրության և տպագրական արդյունաբերության համար նախատեսված մոդելային տեքստ է: Սկսած 1500-ականներից` Lorem Ipsum-ը հանդիսացել է տպագրական արդյունաբերության ստանդարտ մոդելային տեքստ, ինչը մի անհայտ տպագրիչի կողմից տարբեր տառատեսակների օրինակների գիրք ստեղծելու ջանքերի արդյունք է: Այս տեքստը ոչ միայն կարողացել է գոյատևել հինգ դարաշրջան, այլև ներառվել է էլեկտրոնային տպագրության մեջ` մնալով էապես անփոփոխ ․․․
</section>Տես ինչ կկատարվի, եթե դու փոխես քո զննարկիչի չափերը. ամեն ինչ գեղեցիկ է աշխատում։
</section>
Այս օրինակը աշխատում է , որովհետև container-ի բարձրությունը ավելին է քան nav-ինը։
Հակառակ դեպքում nav-ը դուրս կգա container-ի սահմաններից։
Մյուս էջերում մենք կդիտարկենք այլ տեխնիկաներ, որոնք ունեն իրենց լավ և վատ կողմերը։