Absolute vs. ნათესავი - ახსნა CSS პოზიციონირება

CSS პოზიციონირება უფრო მეტია, ვიდრე მხოლოდ X, Y კოორდინატები

CSS პოზიციონირების დიდი ხანია მნიშვნელოვანი ნაწილი შექმნის ნახვა ფორმატისთვის. მაშინაც კი, ზრდის ახალი CSS განლაგება ტექნიკა, როგორიცაა Flexbox და CSS Grid, პოზიციონირების მაინც მნიშვნელოვანი ადგილია ნებისმიერ ვებ დიზაინერი ის ტომარა tricks.

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

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

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

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

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

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

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

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

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

მაგალითისთვის - თუ გქონდათ განყოფილება, რომელიც შეესაბამებოდა ნათესავის მნიშვნელობას (ამ მნიშვნელობას მოკლედ ვნახავთ) და იმ გაყოფის შიგნით, რომლითაც გქონდათ პარაგრაფი, რომ გინდა განათავსოთ 50 პიქსელი განყოფილების თავზე, ამ პუნქტში "აბსოლუტური" პოზიციის ღირებულება დაამატოთ "ზედა" საკუთრებაზე 50px- ის ოფსეტური ღირებულებით.

პოზიცია: აბსოლუტური; დაბრუნება: 50px;

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

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

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

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

ნათესავი პოზიციონირება

ჩვენ უკვე ვთქვით ნათესავი პოზიცია, მოდით შევხედოთ ამ ქონებას ახლა.

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

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

პარაგრაფი 2.

მე -3 პუნქტი.

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

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

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

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

ამ ქონების ღირებულების გამოსაყენებლად, მითითებული იქნება:

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

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

@media ეკრანზე {h1 # პირველი {პოზიცია: ფიქსირებული; }} @media print {h1 # first {position: static; }}

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 1/7/16.