CSS-ում տարրերի հարաբերական դիրքավորումը

Հարաբերական դիրքավորումը սահմանվում է position հատկության համար relative արժեքով: Այսպիսի դիրքավորումը թույլ է տալիս տարրերը տեղաշարժել իրենց ներկայիս դիրքից տրված չափով: Դրանով իսկ էջի մնացած բոլոր տարրերը կմտածեն, որ տարրը գտնվում է այնտեղ, որտեղ սկզբնապես էր: Այսինքն՝ դիրքավորման այս տեսակի դեպքում տարրը դուրս չի գալիս նորմալ հոսքից:

Ընթացիկ դիրքից տեղաշարժերը սահմանվում են top, right, bottom և left հատկություններով:

Օրինակ

Սկսելու համար եկեք պարզապես ստեղծենք երկու բլոկ առանց դիրքավորման:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Օրինակ

Հիմա ավելացնենք առաջին բլոկին relative: Սրանից դեռ ոչինչ չի փոխվի, քանի որ մենք չենք նշել բլոկի տեղաշարժը:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Օրինակ

Հիմա եկեք մեր բլոկը 30px-ով տեղափոխենք վերևից, նշելով դրան top հատկությունը: Դրանով իսկ մնացած բոլոր տարրերը կվարվեն այնպես, ասես մեր բլոկը մնացել է այն տեղում, որտեղ է սկզբնապես:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Օրինակ

Եկեք նաև մեր բլոկը 40px-ով տեղափոխենք ձախից, նշելով դրան left հատկությունը:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  position: relative;
  top: 30px;
  left: 40px;
  
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Օրինակ

top, right, bottom և left հատկությունների բացասական արժեքները տեղաշարժում են հակառակ ուղղությամբ: Օրինակ, top-ի դրական արժեքը տեղաշարժում է ներքև, իսկ բացասականը՝ վերև:

Եկեք մեր երկրորդ բլոկը 40px-ով տեղափոխենք վերև, նշելով դրան top հատկության բացասական արժեք:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  border: 1px solid green;
}
#elem2 {
  position: relative;
  top: -40px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

Результат:

Գործնական առաջադրանքներ

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#elem1 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #FF8888;
}
#elem2 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #7E89EB;
}
#elem3 {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  background-color: #4DEE99;
}