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

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

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

ვერტიკალურად საჭიროა დააყენოთ ზედაპირი ან ზემოდან, ან ქვემოდან. ზემოდან ზედაპირის ადგილს უკავებს თვისება top, ხოლო ქვემოდან - თვისება bottom. ჰორიზონტალურად საჭიროა დააყენოთ ზედაპირი ან მარცხნიდან, ან მარჯვნიდან. მარცხნიდან ზედაპირის ადგილს უკავებს თვისება left, ხოლო მარჯვნიდან - თვისება right.

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

მაგალითი

დასაწყისისთვის მოდით უბრალოდ გავაკეთოთ ორი ბლოკი პოზიციონირების გარეშე (ყურადღება მიაქციეთ იმას, რომ ელემენტები არ არის დაჭერილი ფანჯრის კიდეს, რადგან body-ს აქვს margin ნაგულისხმევად):

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

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

მაგალითი

მოდით ახლა მწვანე ბლოკს მივანიჭოთ აბსოლუტური პოზიციონირება, დავსვათ იგი პოზიციაში ზემოდან 150px და მარცხნიდან 100px:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

მაგალითი

მოდით ახლა მწვანე ბლოკი დავსვათ პოზიციაში 0px ზემოდან და 0px მარცხნიდან:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

მაგალითი

მოდით ახლა მწვანე ბლოკი დავსვათ პოზიციაში 0px ზემოდან და 0px მარჯვნიდან:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

მაგალითი

მოდით ახლა მწვანე ბლოკი დავსვათ პოზიციაში 0px ქვემოდან და 0px მარჯვნიდან:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

მაგალითი

მოდით ახლა მწვანე ბლოკი დავსვათ პოზიციაში 0px ქვემოდან და 0px მარცხნიდან:

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

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

პრაქტიკული ამოცანები

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