CSS თვისება position:absolute; relative; fixed; sticky

27-03-2021, 22:03

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

გაკვეთილზე განხილული მაგალითების კოდებია:
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;
}

CSS თვისება position:absolute; relative; fixed; sticky

მსგავსი სიახლე