CSS თვისება position:absolute; relative; fixed; sticky
საიტის შექმნისას ერთერთ მთავარ ინსტრუმენტს ბლოკების მრავალმხრივი განლაგებისათვის წარმოადგენს პოზიცირება. მისი საშუალებით ჩვენ შეგვიძლია ბლოკი ნებისმიერ ადგილზე განვალაგოთ როგორც ბრაუზერის მიმართ, ასევე გარე მდებარე (მშობელი) ბლოკის მიმართ. პოზიცირების რამდენიმე ვარიანტი არსებობს: აბსოლუტური, რელატიური, ფიქსირებული.
ეს მასალა კოდებით და სურათებით განხილული მაქვს ძველ საიტზე. იხ. ბმული
გაკვეთილზე განხილული მაგალითების კოდებია:
HTML
CSS
ეს მასალა კოდებით და სურათებით განხილული მაქვს ძველ საიტზე. იხ. ბმული
გაკვეთილზე განხილული მაგალითების კოდებია:
HTML
<!DOCTYPE HTML>
<html>
<header>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Position</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</header>
<body>
<h1 style="text-align:center; padding: 10px;">position:absolute; relative; fixed;</h1>
<div class="main">
<img src="https://i.mycdn.me/i?r=AyH4iRPQ2q0otWIFepML2LxRuBJLdEKwlVo42ysNa3wvZQ" alt="ფლამინგო">
<div class="minor"></div>
<div class="minor1"></div>
</div>
<div class="other"> </div>
<div class="fix1">
<img src="https://berenyisoft.eu/wp-content/uploads/2020/04/BSys-Smile.jpg" alt="სიცილაკი">
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
body{
background-color: pink;
height: 1200px;
}
.main{
width: 500px;
height:500px;
margin: 0 auto;
outline: 3px solid red;
position: relative;
//top:290px ;
//left: 30px;
}
.minor{
width: 200px;
height:200px;
outline: 3px solid blue;
background-color: blue;
position: absolute;
top:70px;
right: 110px;
z-index:20;
}
.minor1{
width: 200px;
height:200px;
outline: 3px solid orange;
background-color: orange;
opacity: 1;
position: absolute;
top:150px ;
left: 80px;
z-index:15;
}
.main img{
width: 200px;
position: absolute;
top: 10px ;
left: 15px;
z-index:5;
}
.other{
width: 900px;
height:100px;
background-color: green;
}
.fix1{
width: 100px;
height: 100px;
position: fixed;
top:100px;
right: 60px;
}
.fix1 img{
width: 100px;
}