პოზიცირება: აბსოლუტური და რელატიური

შევქმნათ ერთი დიდი ბლოკი და მასში განვათავსოთ სამი ბლოკი. აქედან პირველი ბლოკის სიგანე ნაკლები იყოს მშობელ ბლოკზე და მივცეთ ცოტაოდენი გამჭირვალობა. მეორე და მესამე ბლოკში განვათავსოთ რაიმე ტექსტი. ქვემოთ მოცემულია html და css კოდები. css კოდში კომენტარების სახით არის სტილების სტრიქონები, რომელიც შემდგომში დაგვჭირდება, მის ასამუშავებლად უბრალოდ კომენტირებას მოვხსნით.
 
<!DOCTYPE HTML>
	<html>
	<header>
	<meta charset=utf-8>
	<title>სასწავლო საიტი</title>
	<link  href="main_pos.css" type="text/css" rel="stylesheet" />
	</header>
	<body>
	<br/>
	<div id="parent" >
	<div id="children1">
	<h1>პირველი ბლოკი</h1>
	</div>
	<div class="children2">
	<h1>მეორე ბლოკი</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur distinctio esse obcaecati incidunt, ipsam laboriosam accusamus nisi nam suscipit, optio veritatis iusto hic maiores magni enim quidem quia architecto voluptatibus.</p>
	<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ratione deleniti animi aliquam, atque amet quam impedit sint dolorum architecto distinctio officiis tenetur enim consectetur numquam ipsa molestiae fugiat. Adipisci!</span><span>Veritatis ipsum nam, ad, ut adipisci impedit numquam deserunt commodi assumenda, dicta nobis, optio nulla aspernatur! Minus illum consectetur quisquam aliquam ad, rem, pariatur quam quasi enim quaerat ipsam eligendi!</span></p>
	</div>
	<div class="children3">
	<h1>მესამე ბლოკი</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat quia et ab, autem placeat dicta distinctio repellendus maxime a inventore provident ut commodi dolore? Consectetur vitae iure quam sequi quos.</p>
	<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, accusamus, voluptatum! Blanditiis harum, ut dicta iure ipsum, libero, maiores incidunt laboriosam perspiciatis est ratione, at expedita doloremque iste eaque dolorum.</span><span>Sequi non enim, veritatis odit adipisci nostrum repudiandae libero voluptate culpa perferendis ea? Veritatis nobis minus asperiores reprehenderit aperiam quod, aut illum sunt ullam consequuntur nemo at, doloremque deleniti pariatur.</span></p>
	</div>
	</div>
	
	
	</body>
	</html>
*{
	margin: 0;
	padding: 0;
	}
	body{
	background:#fff;
	}
	p{
	font-size: 12px;
	color:#000;
	}
	
	
	#parent {
	width: 600px;
	height:600px;
	margin: 0 auto;
	border: 3px solid #000;
	background: #A2DADA;
	//position: relative;
	}
	
	
	#children1{
	//position: absolute;
	//position: relative;
	//top: 30px;
	//left: 30px;
	width: 150px;
	height:150px;
	border: 2px solid #544BFF;
	background:  #33FF0F;
	opacity: 0.7;
	}
	.children2{
	width: 600px;
	height:150px;
	border: 2px solid #544BFF;
	background:  #F3FF0A;
	
	}
	.children3{
	width:600;
	height:150px;
	border: 2px solid #544BFF;
	background:  #FF2F14;
	
	}
	

დააკოპირეთ კოდები და მიიღებთ შემდეგ სურათს.

პოზიცირება: აბსოლუტური და რელატიური

 

ვხედავთ ერთ დიდ ბლოკში განთავსებულ სამ ბლოკს, რომლებიც თანმიმდევრულად არიან განლაგებულნი ზემოდან ქვემოთ.  პირველი ბლოკის აბსოლუტური პოზიცირების მისაღებად მოვხსნად კომენტარი სტრიქონს  #children1{ //position: absolute; და ასე ჩავწეროთ #children1{ position: absolute; დანარჩენი უცვლელად დავტოვოთ. მივიღებთ ასეთ სურათს:

 

პოზიცირება: აბსოლუტური და რელატიური

 

როგორც სურათიდან ჩანს პირველი ბლოკი ამოვარდა ნაკადიდან, აფარფატდა სივრცეში, გაათავისუფლა ადგილი და ქვედა ბლოკები შეცურდნენ მის ქვეშ, მაგრამ განსხვავებით float-ისაგან,  მეორე ბლოკის შიგთავსმა მისი ადგილი სრულიად დაიკავა. როგორც გვახსოვს float-ის დროს, შეცურებული ბლოკის შიგთავსი ვერ იკავებდა იმ ადგილს, სადაც აფარფატებული ბლოკი იყო.
 ახლა კომენტარი მოვხსნათ პირველი ბლოკის ამ ორ სტრიქონს //top: 30px; //left: 30px; ანუ ასეთი კოდი მივიღოთ #children1{ position:absolute; //position:relative; top: 30px; left: 30px;  დანარჩენი იგივე დავტოვოთ.  დავინახავთ რომ სურათი ასე შეიცვლება:

პოზიცირება: აბსოლუტური და რელატიური

 

ანუ ამოვარდნილი პირველი ბლოკი განლაგდა ბრაუზერის მიმართ ზედა მარცხენა კუთხეში დაშორებით ზევიდან და გვერდიდან 30 პიქსელით. ( თქვენი მონიტორის მიხედვით სურათი ოდნავ განსხვავებული შეიძლება იყოს, მაგრამ კიდეებიდან დაშორება 30 პიქსელი იქნება).

 გავაკეთოდ პირველი დასკვნა: აბსოლუტური პოზიცირების დროს თუ ბლოკს მივანიჭებთ კოორდინატებს, ის ათვლის წერტილად აიღებს ბრაუზერის კიდეს და მითითებული პიქსელებით დაშორდება. არ აქვს მნიშვნელობა თავდაპირველად ეს ბლოკი სად იყო განლაგებული. გვაქვს შემდეგი ვარიანტები: 1)top left, 2)top right, 3)bottom left, 4)bottom right.

 

მაგრამ ბრაუზერის მიმართ განლაგება ყოველთვის არ გამოგვადგება, რადგან ეკრანის ზომებზე იქნება დამოკიდებული და შეიძლება სრულიად არასასურველი შედეგი მივიღოთ. სასურველია პოზიცირებული ბლოკი განლაგდეს მისი მშობელი ბლოკის მიმართ და არ იყოს დამოკიდებული ეკრანის ზომებზე. ამ შედეგის მისაღწევად მისი მშობელი ბლოკიც პოზიცირებული უნდა იყოს. ჩვეულებრივ მშობელ ბლოკს რელატიურ პოზიცირებას ანიჭებენ. (თუ რატომ, შემდგომში ავხსნი). 
 მოვუხსნათ კომენტირება მშობელ ბლოკში სტრიქონს //position: relative;   ანუ გვექნება #parent {იგივე კოდი და position: relative;}
დავინახავთ რომ პირველი ბლოკი დაბრუნდა მშობელ ბლოკში და მისი ზედა კიდეებიდან განლაგდა 30 პიქსელის დაშორებით.

პოზიცირება: აბსოლუტური და რელატიური

 

მეორე დასკვნა: თუ გვინდა რომ პოზიცირებული ბლოკი მშობელი ბლოკის მიმართ განლაგდეს გარკვეული კოორდინატებით, მაშინ მშობელ ბლოკსაც უნდა გააჩნდეს პოზიცირება. 
 თუ რატომ ანიჭებენ მშობელ ბლოკს ჩვეულებრივ  რელატიურ პოზიცირებას, ახლა გავარკვევთ. პირველი ბლოკის სტილები ასე შევცვალოთ: ისევ დავაკომენტიროთ აბსოლუტური პოზიცირება და მოვუხსნათ კომენტარი რელატიურ პოზიცირებას. ამ მაგალითისთვის მშობელი ბლოკის სტილს მნიშვნელობა არ აქვს. ანუ პირველი ბლოკისთვის  გვექნება კოდი #children1{  position:relative; top: 30px; left: 30px;  დანარჩენი კოდი იგივე. განვიხილოთ მიღებული შედეგი:

პოზიცირება: აბსოლუტური და რელატიური

ვხედავთ რომ პირველი ბლოკი აფარფატდა და გადაიწია 30 პიქსელით, მაგრამ მისი ძველი ადგილი ვერავინ ვერ დაიკავა, მთელი ის სივრცე ხელუხლებელი დარჩა. ჩვენ რომ კოორდინატები არ მიგვენიჭებინა, ან 0-ის ტოლი მიგვეცა, ვერავითარ განსხვავებას ვერ დავინახავდით: პირველი ბლოკი აფარფატებული იყო თუ მას არავითარი პოზიცირება არ ქონდა მინიჭებული.

სწორედ ამიტომაც მშობელ ბლოკს ანიჭებენ რელატიურ პოზიცირებას, რომ გარეგნულად არაფერი შეიცვალოს, მაგრამ შვილობილ ბლოკებს მიეცეს საშუალება მის მიმართ პოზიცირების. ეს მესამე დასკვნა იყო.

 

აუცილებლად შეასრულეთ დავალება!