Нисбии ҷойгир кардани элементҳо дар CSS

Нисбии ҷойгир кардан бо қимати relative барои хосияти position муайян карда мешавад. Ин гуна ҷойгир кардан имкон медиҳад, ки элементҳо нисбат ба ҷойи ҷорӣ ба майдони муайян ҷойиваз шаванд. Дар ин ҳол ҳамаи элементҳои дигари саҳифа ҳис мекунанд, ки элемент дар ҳамон ҷоест, ки аввал буд. Яъне дар ин навъи ҷойгирӣ элемент аз раванди одӣ берун намеояд.

Ҷойивазӣ аз ҷойи ҷорӣ бо хосиятҳои 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;
}

Ин блокҳоро бо ёрии ҷойгирии нисбӣ ба тариқи зерин ҷойиваз кунед: