դիրքավորման օրինակ

Դիրքավորումը մի փոքր ավելի հասկանալի է կիրառական օրինակների վրա։ Հաջորդիվ էջի իրական դիրքավորմանը մոտիկ օրինակ է։

.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;
}
<div class="container">
<section>

sectionmargin-left ոճը ապահովում է ազատ տարածություն nav-ի համար։ Հակառակ դեպքում բացարձակ և ստատիկ էլեմենտները իրար վրա կբարձրանան։

</section>
<section>

Lorem Ipsum-ը տպագրության և տպագրական արդյունաբերության համար նախատեսված մոդելային տեքստ է: Սկսած 1500-ականներից` Lorem Ipsum-ը հանդիսացել է տպագրական արդյունաբերության ստանդարտ մոդելային տեքստ, ինչը մի անհայտ տպագրիչի կողմից տարբեր տառատեսակների օրինակների գիրք ստեղծելու ջանքերի արդյունք է: Այս տեքստը ոչ միայն կարողացել է գոյատևել հինգ դարաշրջան, այլև ներառվել է էլեկտրոնային տպագրության մեջ` մնալով էապես անփոփոխ ․․․

</section>
<section>

Տես ինչ կկատարվի, եթե դու փոխես քո զննարկիչի չափերը. ամեն ինչ գեղեցիկ է աշխատում։

</section>
<footer>

Եթե օգտագործում ես ֆիքսված գլխամաս կամ նկուղ, համոզվիր, որ դրանց համար ազատ տեղ կա։ Ես body-ին տվել եմ margin-bottom։

</footer>

Այս օրինակը աշխատում է , որովհետև container-ի բարձրությունը ավելին է քան nav-ինը։ Հակառակ դեպքում nav-ը դուրս կգա container-ի սահմաններից։

Մյուս էջերում մենք կդիտարկենք այլ տեխնիկաներ, որոնք ունեն իրենց լավ և վատ կողմերը։

  • Creative Commons License