CSS სახელმძღვანელო

CSS - დამწყებებისთვის

CSS - მიმოხილვა CSS - სინტაქსი CSS - სელექტორები CSS - შემოტანა CSS - ტექსტური თვისებები CSS - კომენტარი CSS - ფონები CSS - საზღვრები CSS - სიმაღლე და სიგანე CSS - ფონტის შემოტანა CSS - შიდა დაშორება (PADDING) CSS - გარე დაშორება (MARGIN) CSS - სიები CSS - ბმულები CSS - DISPLAY CSS - პოზიციები CSS - Z-INDEX CSS - OVERFLOW CSS - Opacity CSS - ერთეულები CSS - !important

CSS - სელექტორები

CSS - კომბინატორები CSS - ფსევდო კლასები CSS - ფსევდო ელემენტები CSS - ატრიბუტი სელექტორი

CSS - FLEXBOX

FLEXBOX - მიმოხილვა FLEXBOX - კონტეინერი FLEXBOX - ელემენტები

CSS - Responsive

Responsive - მიმოხილვა Responsive - პრინციპები @media - ქუერები

CSS - საშუალო დონე

CSS - ფილტრები CSS - object-fit CSS - გრადაციები CSS - ფონის თვისებები CSS - შუქჩრდილები CSS - 2D/3D ტრანსფორმაციები CSS - გადასვლები CSS - კურსორის თვისებები CSS - ანიმაციები

CSS - კომპონენტები

CSS - სანავიგაციო მენიუ (NAVBAR) CSS - ფორმა CSS - ღილაკები CSS - ბარათი (card) CSS - CHECKBOX & RADIO

პოზიციების გამოყენებისას ზოგჯერ ელემენტები ერთმანეთს ფარავენ, z-index თვისება გამოიყენება თანმიმდევრობის სარეგულირებლად


Z-INDEX თვისება განსაზღვრავს რომელი ელემენტი უნდა იყოს წინ და რომელი უკან


მაგალითი:

css:   
.container{
        position: absolute;
        left:0px;
        top: 0px;
        width: 500px;
        height: 500px;
        background-color: green;
    }

    .content{
        position: absolute;
        left:0px;
        top: 0px;
        width: 500px;
        height: 500px;
        background-color: red;
    }


   
html:
<div class="container">
        <h1>კონტენტი</h1>
    </div>
    <div class="content">
        <h1>კონტენტი</h1>
    </div>


განმარტება:

როდესაც ელემენტებს არ აქვთ მინიჭებული z-index თვისება, უპირატესობით სარგებლობს ის ელემენტი რომელიც წერია  ბოლოს , მოყვანილ მაგალითში .content ელემენტი გადაფარავს .container ელემენტს


საკმარისია რომ .container ელემენტს ჩავუმატოთ z-index თვისება წინა პლანზე სწორედ ის აღმოჩდება

მაგალითი:

    .container{
        position: absolute;
        left:0px;
        top: 0px;
        width: 500px;
        height: 500px;
        background-color: green;
        z-index: 1;

    }


რომელ ელემენტსაც ექნება z-index მაღალი მნიშვნელობა ის იქნება უპირატესი


შენიშვნა
z-index მუშაობს მხოლოდ პოზიციებთან ( absolute,  relative,  fixed,   sticky) !