პოზიცირება: აბსოლუტური და რელატიური
<!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-ის დროს, შეცურებული ბლოკის შიგთავსი ვერ იკავებდა იმ ადგილს, სადაც აფარფატებული ბლოკი იყო.
ანუ ამოვარდნილი პირველი ბლოკი განლაგდა ბრაუზერის მიმართ ზედა მარცხენა კუთხეში დაშორებით ზევიდან და გვერდიდან 30 პიქსელით. ( თქვენი მონიტორის მიხედვით სურათი ოდნავ განსხვავებული შეიძლება იყოს, მაგრამ კიდეებიდან დაშორება 30 პიქსელი იქნება).
გავაკეთოდ პირველი დასკვნა: აბსოლუტური პოზიცირების დროს თუ ბლოკს მივანიჭებთ კოორდინატებს, ის ათვლის წერტილად აიღებს ბრაუზერის კიდეს და მითითებული პიქსელებით დაშორდება. არ აქვს მნიშვნელობა თავდაპირველად ეს ბლოკი სად იყო განლაგებული. გვაქვს შემდეგი ვარიანტები: 1)top left, 2)top right, 3)bottom left, 4)bottom right.
მაგრამ ბრაუზერის მიმართ განლაგება ყოველთვის არ გამოგვადგება, რადგან ეკრანის ზომებზე იქნება დამოკიდებული და შეიძლება სრულიად არასასურველი შედეგი მივიღოთ. სასურველია პოზიცირებული ბლოკი განლაგდეს მისი მშობელი ბლოკის მიმართ და არ იყოს დამოკიდებული ეკრანის ზომებზე. ამ შედეგის მისაღწევად მისი მშობელი ბლოკიც პოზიცირებული უნდა იყოს. ჩვეულებრივ მშობელ ბლოკს რელატიურ პოზიცირებას ანიჭებენ. (თუ რატომ, შემდგომში ავხსნი).
მეორე დასკვნა: თუ გვინდა რომ პოზიცირებული ბლოკი მშობელი ბლოკის მიმართ განლაგდეს გარკვეული კოორდინატებით, მაშინ მშობელ ბლოკსაც უნდა გააჩნდეს პოზიცირება.
ვხედავთ რომ პირველი ბლოკი აფარფატდა და გადაიწია 30 პიქსელით, მაგრამ მისი ძველი ადგილი ვერავინ ვერ დაიკავა, მთელი ის სივრცე ხელუხლებელი დარჩა. ჩვენ რომ კოორდინატები არ მიგვენიჭებინა, ან 0-ის ტოლი მიგვეცა, ვერავითარ განსხვავებას ვერ დავინახავდით: პირველი ბლოკი აფარფატებული იყო თუ მას არავითარი პოზიცირება არ ქონდა მინიჭებული.
სწორედ ამიტომაც მშობელ ბლოკს ანიჭებენ რელატიურ პოზიცირებას, რომ გარეგნულად არაფერი შეიცვალოს, მაგრამ შვილობილ ბლოკებს მიეცეს საშუალება მის მიმართ პოზიცირების. ეს მესამე დასკვნა იყო.
აუცილებლად შეასრულეთ დავალება!