აბსოლუტური პოზიციონირება კოორდინატების გარეშე CSS-ში

სინამდვილეში კოორდინატების მითითება აბსოლუტურ პოზიციონირებისას არ არის სავალდებულო. თუ ელემენტს უბრალოდ დავწერთ position მნიშვნელობაში absolute, მაშინ ის გახდება აბსოლუტურად დაპოზიცირებული, მაგრამ დარჩება იმავე ადგილას, სადაც იდგა. ამ შემთხვევაში ყველა სხვა ელემენტი იქცევა ისე, თითქოს ჩვენი ელემენტი არ არის და შეიძლება მასზე ავიდნენ.

მოდით შევხედოთ მაგალითებს.

მაგალითი

დასაწყისისთვის მოდით უბრალოდ გავაკეთოთ სამი ბლოკი პოზიციონირების გარეშე და მათ შორის გარკვეული ტექსტი:

<div id="elem1"></div>
<div id="elem2"></div>
ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

მაგალითი

ახლა კი მოდით მივუმატოთ მწვანე ბლოკს absolute. შედეგად ეს ბლოკი ადგილზე დარჩება, ყველა ელემენტი კი ქვემოთ იქცევა ისე, თითქოს ჩვენი ელემენტი არ არის და მასზე ავლენ:

<div id="elem1"></div>
<div id="elem2"></div>
ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

მაგალითი

ახლა კი მოდით დავამატოთ თვისება left, ვერტიკალურ პოზიციას რომ არ ვამატებთ. შედეგად ჰორიზონტალურად ჩვენი ბლოკი დაეცემა მითითებულ მნიშვნელობაზე, ვერტიკალურად კი - დარჩება იმავე ადგილას, სადაც იდგა:

<div id="elem1"></div>
<div id="elem2"></div>
ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	left: 40px; /* ვამატებთ პოზიციას ჰორიზონტალურად */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

მაგალითი

ახლა მოდით, პირიქით, დავამატოთ თვისება top, ჰორიზონტალურ პოზიციას რომ არ ვამატებთ. შედეგად ვერტიკალურად ჩვენი ბლოკი დაეცემა მითითებულ მნიშვნელობაზე, ჰორიზონტალურად კი - დარჩება იმავე ადგილას, სადაც იდგა:

<div id="elem1"></div>
<div id="elem2"></div>
ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი ტექსტი
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 100px; /* ვამატებთ პოზიციას ვერტიკალურად */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}