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

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

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

Օրինակ

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

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

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

Օրինակ

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

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

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

Օրինակ

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

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

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

Օրինակ

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

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

#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 հատկության բացասական արժեք:

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

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

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

Տրված են հետևյալ բլոկները:

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

#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;
}

Տեղափոխեք այս բլոկները հարաբերական դիրքավորման միջոցով հետևյալ կերպ.