დაუსრულებელი გადახვევა მნახველისთვის უხილავია. გვერდის უსასრულო გადახვევა: ფუნქციები და იდეები. Როგორ მუშაობს

აღწერა

ადგენს, თუ როგორ განლაგდება ელემენტი ბრაუზერის ფანჯარასთან ან ვებ გვერდზე სხვა ობიექტებთან მიმართებაში.

Სინტაქსი

პოზიცია: აბსოლუტური | ფიქსირებული | ნათესავი | სტატიკური | მემკვიდრეობით

ღირებულებები

absolute მიუთითებს, რომ ელემენტი აბსოლუტურად განლაგებულია, რაც იწვევს სხვა ელემენტების გამოჩენას ვებ გვერდზე ისე, თითქოს ელემენტი არ იყოს აბსოლუტურად განლაგებული. ელემენტის პოზიცია მითითებულია მარცხენა, ზედა, მარჯვენა და ქვედა თვისებებით, ასევე პოზიციაზე გავლენას ახდენს ძირითადი ელემენტის პოზიციის თვისების მნიშვნელობა. ასე რომ, თუ მშობლის პოზიციის მნიშვნელობა დაყენებულია სტატიკური ან არ არის მშობელი, მაშინ კოორდინატები ითვლება ბრაუზერის ფანჯრის კიდედან. თუ მშობლის პოზიციის მნიშვნელობა არის ფიქსირებული, ფარდობითი ან აბსოლუტური, მაშინ კოორდინატები ითვლიან მშობელი ელემენტის კიდიდან. დაფიქსირდა თავისი მოქმედებით, ეს მნიშვნელობა ახლოს არის აბსოლუტურთან, მაგრამ მისგან განსხვავებით, იგი მიბმულია ეკრანის წერტილთან, რომელიც მითითებულია მარცხენა, ზედა, მარჯვენა და ქვედა თვისებებით და არ იცვლის თავის პოზიციას ვებ გვერდის გადახვევისას. Firefox ბრაუზერისაერთოდ არ აჩვენებს გადახვევის ზოლები, თუ ელემენტის პოზიცია დაყენებულია ფიქსირებულზე და ის მთლიანად არ ჯდება ბრაუზერის ფანჯარაში. IN ოპერის ბრაუზერიმიუხედავად იმისა, რომ გადახვევის ზოლები ნაჩვენებია, ისინი არანაირად არ იმოქმედებენ ელემენტის პოზიციაზე. შედარებითი ელემენტის პოზიცია დაყენებულია მის თავდაპირველ მდებარეობასთან შედარებით. მარცხენა, ზედა, მარჯვენა და ქვედა თვისებების დამატება ცვლის ელემენტის პოზიციას და გადაიტანს მას ამა თუ იმ მხარეს თავდაპირველი მდებარეობიდან. სტატიკური ელემენტები გამოსახულია ჩვეულებისამებრ. მარცხენა, ზედა, მარჯვენა და ქვედა თვისებების გამოყენება არანაირ შედეგს არ იძლევა. inherit მემკვიდრეობით იღებს მშობლის ღირებულებას.

HTML5 CSS2.1 IE Cr Op Sa Fx

შედეგი ეს მაგალითინაჩვენებია ნახ. 1.

ბრინჯი. 1. პოზიციის თვისების გამოყენება

ობიექტის მოდელი

document.getElementById("elementID").style.პოზიცია

ბრაუზერები

ბრაუზერი Internet Explorer 6 არ უჭერს მხარს ფიქსირებულ მნიშვნელობას. Internet Explorer 8.0 ვერსიამდე არ უჭერს მხარს მემკვიდრეობის მნიშვნელობას.

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

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

აბსოლუტური პოზიციონირება მითითებულია შემდეგნაირად:

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

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

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

ბლოკი (პოზიცია: აბსოლუტური; ქვედა: 0; მარჯვნივ: 0; ფონი: ნაცრისფერი;)

ელემენტი კლასით ბლოკიგადავა ბრაუზერის ქვედა მარჯვენა კუთხეში.

მოდით შევხედოთ მაგალითს, სადაც ბლოკი არის მშობელი ელემენტის შიგნით.

მშობელი ელემენტის შიგნით დაბლოკვა

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

შედარებითი პოზიციონირება

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

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

გახსოვდეთ, რომ ოფსეტი არ მოდის ბრაუზერის ფანჯრის კიდეებიდან, არამედ იმ ადგილიდან, სადაც თავდაპირველად ბლოკი იდგა.

სტანდარტული ბლოკი

სტანდარტული ბლოკი

ბლოკი გადავა 50 პიქსელით მარჯვნივ და 10 პიქსელით ზემოთ. მაგრამ მისი ადგილი ხელუხლებელი დარჩა.

სტანდარტული ბლოკი

როგორც ხედავთ, თქვენ ასევე შეგიძლიათ დააყენოთ უარყოფითი მნიშვნელობები.

ფიქსირებული პოზიციონირება

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

ბლოკი (პოზიცია: ფიქსირებული;)

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

სტატიკური პოზიციონირება

ბოლო ტიპი არის სტატიკური პოზიციონირება, ეს არის ბლოკის ელემენტების ჩვეულებრივი ქცევა. არ არის საჭირო დაკონკრეტება, რადგან ის ნაგულისხმევია. Მაგრამ ხანდახან პოზიცია: სტატიკურიგამოიყენება JavaScript-ის სკრიპტებში ვებგვერდზე გარკვეულ მოვლენებზე სხვა პოზიციონირების გადასაფარად.

პოზიციონირება ერთ-ერთია ძირითადი ცნებებივ ბლოკის განლაგება. როგორც კი გაიგებთ, ბევრი რამ გახდება თქვენთვის ნათელი და განლაგება გადაიქცევა შამანიზმიდან შინაარსობრივ პროცესად. ასე რომ, ეს სტატია ყურადღებას გაამახვილებს CSS თვისებებზე. პოზიციადა ათწილადი.

1. პოზიცია: სტატიკური

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

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

#content (პოზიცია: სტატიკური; )

2.პოზიცია:ნათესავი

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

მოდით გადავიტანოთ #კონტენტი 20 პიქსელით ქვემოთ და 40 პიქსელით მარცხნივ:

#content (პოზიცია: შედარებითი; ზედა: 20 პიქსელი; მარცხნივ: -40 პიქსელი; )

გაითვალისწინეთ, რომ ახლა არის ცარიელი ადგილი, სადაც ჩვენი #content ბლოკი იქნებოდა. #content ბლოკის შემდეგ, #footer ბლოკი არ გადავიდა ქვემოთ, რადგან #content კვლავ იკავებს თავის ადგილს დოკუმენტში, მიუხედავად იმისა, რომ ჩვენ გადავიტანეთ იგი.

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

3. პოზიცია: აბსოლუტური

აბსოლუტური პოზიციონირებით (პოზიცია: აბსოლუტური), ელემენტი ამოღებულია დოკუმენტიდან და გამოჩნდება იქ, სადაც მას ეუბნებით.

მოდით, მაგალითად, გადავიტანოთ ბლოკი #div-1a გვერდის ზედა მარჯვენა კუთხეში:

#div-1a (პოზიცია: აბსოლუტური; ზედა: 0; მარჯვნივ: 0; სიგანე: 200 პიქსელი; )

გაითვალისწინეთ, რომ ამჯერად, რადგან #div-1a ბლოკი ამოღებულია დოკუმენტიდან, გვერდზე დარჩენილი ელემენტები განსხვავებულად იყო განლაგებული: #div-1b, #div-1c და #footer გადატანილია ზემოთ, ამოღებული ბლოკის ნაცვლად. . და თავად ბლოკი #div-1a მდებარეობს ზუსტად მარჯვნივ, ზედა კუთხეგვერდები.

ამ გზით ჩვენ შეგვიძლია განვათავსოთ ნებისმიერი ელემენტი გვერდის მიმართ, მაგრამ ეს საკმარისი არ არის. ფაქტობრივად, ჩვენ უნდა დავაყენოთ #div-1a მშობელი #კონტენტის ბლოკთან მიმართებაში. და ამ ეტაპზე, შედარებითი პოზიციონირება კვლავ მოქმედებს.

4. პოზიცია: ფიქსირებული

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

#div-1a (პოზიცია: დაფიქსირებული; ზედა: 0; მარჯვნივ: 0; სიგანე: 200 პიქსელი; )

IE-ში პოზიციით: ფიქსირებული, ყველაფერი არ არის ისეთი გლუვი, როგორც ჩვენ გვსურს, მაგრამ ის არსებობს მრავალი გზაამ შეზღუდვების გვერდის ავლით.

5. თანამდებობა:ნათესავი + თანამდებობა:აბსოლუტური

#content ბლოკისთვის ფარდობითი პოზიციის მინიჭებით (პოზიცია: ნათესავი), შეგვიძლია განვათავსოთ ნებისმიერი ბავშვის ელემენტები, მის საზღვრებთან შედარებით. მოდით მოვათავსოთ #div-1a ბლოკი #content ბლოკის ზედა მარჯვენა კუთხეში.

#content (პოზიცია: შედარებითი; ) #div-1a (პოზიცია:აბსოლუტური; ზედა:0; მარჯვნივ:0; სიგანე:200px; )

6. ორი სვეტი

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

#content (პოზიცია: შედარებითი; ) #div-1a (პოზიცია:აბსოლუტური; ზევით:0; მარჯვნივ:0; სიგანე:200px; ) #div-1b (პოზიცია:აბსოლუტური; ზედა:0; მარცხნივ:0; სიგანე:200px ;)

აბსოლუტური პოზიციონირების ერთ-ერთი უპირატესობა არის ელემენტების ნებისმიერი თანმიმდევრობით განთავსების შესაძლებლობა, მიუხედავად იმისა, თუ როგორ მდებარეობს ისინი მარკირებაში. ზემოთ მოყვანილ მაგალითში #div-1b ბლოკი მოთავსებულია #div-1a ბლოკის წინ.

და ახლა თქვენ უნდა გქონდეთ შეკითხვა: "სად წავიდა ჩვენი მაგალითის დანარჩენი ელემენტები?" ისინი იდეალურად განლაგებული ბლოკების ქვეშ იმალებოდნენ. საბედნიეროდ, ამის გამოსწორების გზა არსებობს.

7. ორი სვეტი ფიქსირებული სიმაღლით

ერთი გამოსავალია სვეტების შემცველი კონტეინერისთვის ფიქსირებული სიმაღლის მიცემა.

#content ( პოზიცია: ფარდობითი; სიმაღლე: 450px; ) #div-1a (პოზიცია:აბსოლუტური; ზევით:0; მარჯვნივ:0; სიგანე:200px; ) #div-1b (პოზიცია:აბსოლუტური; ზედა:0; მარცხნივ:0 ;სიგანე:200px;

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

8. მცურავი

ცვლადი სიმაღლის სვეტებისთვის, აბსოლუტური პოზიციონირება არ არის ვარიანტი, ასე რომ, მოდით შევხედოთ სხვა ვარიანტს.

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

#div-1a (float:მარცხნივ; სიგანე:200px;)

9. „მცურავი“ დინამიკები

თუ პირველ ბლოკს მივაკუთვნებთ float: მარცხენას და შემდეგ float: მარცხნიდან მეორეზე, თითოეული ბლოკი გადაიწევს მარცხენა კიდეზე და მივიღებთ ორ სვეტს, ცვლადი სიმაღლით.

#div-1a ( float:მარცხნივ; სიგანე:150px; ) #div-1b (float:მარცხნივ; სიგანე:150px; )

თქვენ ასევე შეგიძლიათ მიანიჭოთ საპირისპირო float მნიშვნელობა სვეტებს, ამ შემთხვევაში ისინი გადანაწილდებიან კონტეინერის კიდეებზე.

#div-1a ( float:მარჯვნივ; სიგანე:150px; ) #div-1b (float:მარცხნივ; სიგანე:150px; )

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

10. დასუფთავების float

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

#div-1a ( float:მარცხნივ; სიგანე:190px; ) #div-1b (float:left; სიგანე:190px; ) #div-1c (გასუფთავება:ორივე;)

ან მიანიჭეთ ის მშობელ კონტეინერს გადინება ქონება: დამალული

#content ( overflow: დამალული; )

ნებისმიერ შემთხვევაში, შედეგი იგივე იქნება.

დასკვნა

დღეს განიხილებოდა მხოლოდ ძირითადი პოზიციონირების ტექნიკა და ყველაზე მეტი მარტივი მაგალითები. ასევე, განლაგების დამწყებ დიზაინერების დასახმარებლად, მე ყოველთვის გირჩევთ ივან საგალაევის სტატიების სერიას, რომელიც ერთ დროს ძალიან დამეხმარა.

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

დოკუმენტური ნაკადის კონსტრუქციის სპეციფიკა

მუშაობს ვებ გვერდის ნაკადთან.როგორ გავიგოთ ეს? ნაგულისხმევად, გვერდის ყველა ელემენტი განლაგებულია იმ თანმიმდევრობით, რომლითაც თქვენ შექმენით ისინიhtml-მარკირება. თუ ტეგისათაურიმდებარეობს ტეგის ზემოთქვედა კოლონტიტული,შემდეგ ის გამოჩნდება უფრო მაღლა გვერდზე. და პირიქით, თუ რაიმე მიზეზით გადაწყვეტთ განთავსებასქვედა კოლონტიტულივhtml„სათაურის“ ზემოთ, გვერდის „ძირი“ გამოჩნდება „სათაურის“ ზემოთ. სადაც ბლოკის ელემენტებიდაიკავონ მათთვის ხელმისაწვდომი მთელი სიგანე. მცირე ასოები, თავის მხრივ, მოთავსებულია ერთ ხაზზე, სანამ ისინი არ დაიკავებენ ყველაფერს, შემდეგ კი დაიწყებენ ახალზე გადატანას. ამ ბრძანებას ეწოდება "დოკუმენტური ნაკადი".

ნაკადის ქცევის შესაცვლელად გამოიყენეთ Position თვისებაCSS-ში. ასევე შეიძლება შეიცვალოს ქონების გამოათწილადიმაგრამ ჩვენ არ განვიხილავთ. პოზიციონირების გამოყენებით, თქვენ შეგიძლიათ აიძულოთ ელემენტი "გავარდეს" მისი ნორმალური ნაკადიდან, რის შემდეგაც ის დაიწყებს ახლებურად ქცევას. რამდენად ზუსტად დამოკიდებულია გამოყენებული ქონების ღირებულებაზე.

CSS პოზიცია: სტატიკური

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

CSS პოზიცია: დაფიქსირდა

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

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

CSS პოზიცია: ნათესავი

ამ ქონების გამოყენებას ე.წ შედარებითი პოზიციონირება . თუ დააყენეთ ელემენტის Position თვისება: ნათესავი,ის თავის ადგილზე დარჩება. ერთი შეხედვით განსაკუთრებული არაფერი მოხდება, მაგრამ ყველაფერი შეიცვლება, თუ დამატებით გამოიყენებთ თვისებებსმარჯვნივ/მარცხნივდაზედა/ქვედა.მათი გამოყენება შესაძლებელია კომპონენტის მოძრაობის გასაკონტროლებლად მის მდებარეობასთან შედარებით. იმ ადგილას, სადაც ადრე იყო ბლოკი ან ხაზი, იქნება ცარიელი ადგილი - სხვა ელემენტებიდარჩებიან თავიანთ პოზიციებზე, არ მიაქცევენ ყურადღებას გამოთავისუფლებულ სივრცეს.

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

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

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

პირველ რიგში, ელემენტის პოზიციის თავისუფლად კონტროლი შესაძლებელია - ამისთვის გამოიყენება თვისებებიზედა/მარჯვნივ/ქვემოდან/მარცხნივ.მაგალითად, თუ დააყენეთ მნიშვნელობაქვედა: 100 პიქსელი,ბლოკი გვერდის ქვემოდან 100 პიქსელით „გამოიწევს“.მეორეც, გადახვევისას „აბსოლუტური“ კომპონენტი ადგილზე დარჩება, გვერდზე გადაადგილების ნაცვლად.

აბსოლუტური ბლოკების ურთიერთქმედება მშობელ ელემენტებთან

თქვენ შეგიძლიათ მიაღწიოთ კიდევ უფრო ზუსტ კონტროლს აბსოლუტურად განლაგებულ კომპონენტზე. ამისათვის თქვენ უნდა დააყენოთ Position თვისება მის მშობელზე: ფიქსირებული, ნათესავიანაბსოლუტური.

მოდით შევხედოთ მაგალითს. Შენ გაქვსდივკლასთან ერთადნათესავი-div,რომლის შიგნით მდებარეობსდივკლასთან ერთადაბსოლუტური-დივ.დავაყენეთ შიდა ერთეულიპოზიციონირება ქონება: აბსოლუტური.ის მაშინვე „გაფრინდება“ ნაკადიდან და მთავრდება სადღაც ზევით, რადგან ახლა მისი მდებარეობა გამოითვლება ბრაუზერის ფანჯარასთან შედარებით. ახლა ჩვენ დავაყენეთ ბლოკი კლასთანნათესავი-განყოფაპოზიციონირება ქონება: ნათესავიდა "უძღები შვილი" უბრუნდება თავის ადგილს. თითქმის. სინამდვილეში, ის მთავრდება მშობელი ელემენტის ზედა მარცხენა კუთხეში.

Რატომ ხდება ეს? საქმე არის Position ქონების სპეციფიკა: აბსოლუტური.ნაგულისხმევად, მისი პოზიცია დამოკიდებულია ბრაუზერის ფანჯარაზე, მაგრამ თუ "მშობელი" ასევე განლაგებულია სხვაგანსტატიკურიპოზიცია იწყება მშობელ ელემენტზე დამოკიდებული. ეს ძალიან მოსახერხებელია, რადგან თქვენ შეგიძლიათ განათავსოთ კომპონენტი სადმე გაანგარიშების გარეშე უზარმაზარი რიცხვებიბრაუზერის ფანჯარასთან შედარებით. ტექნიკა ხშირად გამოიყენება ხატების, ღილაკების და სხვა მცირე ელემენტების დასაყენებლად.

დამწყებთათვის ერთ-ერთი მთავარი სირთულეა ელემენტის ვერტიკალურად და ჰორიზონტალურად ცენტრირება. Position ქონების გონივრულად გამოყენება, რაც უფრო ადვილია, ვიდრე ოდესმე.CSS პოზიცია: აბსოლუტური ცენტრში მითითებულია შემდეგნაირად. ვთქვათ თქვენ გაქვთ დivკლასთან ერთადაბსოლუტური-div,რომელიც არის "div" კლასთანნათესავი-განყოფა.„მშობელი“ განლაგებულია შედარებით და მისი სიგანე უდრის მთელი გვერდის სიგანეს. "შთამომავლობას" აქვს სიგანედა სიმაღლე 400 px,აბსოლუტური პოზიციონირება და ნაგულისხმევად განლაგებულია მშობელი ელემენტის ზედა მარცხენა კუთხეში.

ყველაფერი რაც თქვენ უნდა გააკეთოთ არის აბსოლუტური კომპონენტის მიცემაზედა: 50%დამარცხენა: 50%.Თითქმის მზადაა!აბსოლუტური-დივგადავიდა და თითქმის ცენტრში აღმოჩნდა, მაგრამ არა მთლად. „მშობლის“ შუა ნაწილი მის კიდეს ეხება და ჩვენ გვინდა, რომ „ბავშვის“ ცენტრი იყოს ბლოკის ცენტრში. ამისათვის თქვენ უნდა ჰკითხოთ მასზღვარი-მარცხნივდაზღვარი-მარჯვნივმნიშვნელობებით -200px.ეს გადაანაცვლებს აბსოლუტურად განლაგებულ ბლოკს მისი სიმაღლისა და სიგანის ნახევრად. ესე იგი, ის ცენტრშია!

გადახურვის კომპონენტები

პრობლემა შეიძლება იყოს პოზიციონირებული ელემენტების ერთი შეხედვით რთული „გადაფარვა“ მათ „მეზობლებზე“. მაგალითად, კომპონენტი Position-ით: დაფიქსირდაგადაფარავს ყველაფერს გვერდზე. სიტუაციის გამოსწორება შეგიძლიათ ქონების გამოყენებითz-ინდექსითუმცა, გახსოვდეთ, რომ ის მუშაობს მხოლოდ პოზიციონირებულ ელემენტებზე. შესაბამისად, თუ გსურთ მოათავსოთ ბლოკი ფიქსირებულად განლაგებულ ელემენტზე, ეს ბლოკი ასევე უნდა განთავსდეს. მაგალითად, ნათესავი.

ლპოზიციონირების დაუფლების საუკეთესო გზაა პოზიციის მაგალითების ნახვაCSS,ექსპერიმენტი და სცადე რაიმე შენი. შეეცადეთ ისწავლოთ მისი გამოყენება ფუნქციასთან ერთადcalc ()- ეს შესაძლებელს გახდის მდებარეობის უფრო მოქნილად მორგებას. თუმცა, გახსოვდეთ, რომ ეს თვისება არ არის გამიზნული გვერდის მთელი „ბადის“ განლაგებისთვის. მასთან შედარებით მცირე ელემენტების გადატანა გჭირდებათ, თორემ ძალიან მარტივად შეიძლება დაბნეული.