დაბლოკეთ მდებარეობა მარჯვენა css-ზე. აბსოლუტური პოზიციონირება CSS-ში: გაიგე ერთხელ და სამუდამოდ

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

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

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

< body > < div class = "box-1" > < div class = "box-2" > < div class = "box-3" > < div class = "box-4" > < / div > < / div > < / div > < / div > < / body >

box-1 , box-2 და box-3 ყუთები ორიენტირებულია სილამაზისთვის მარჟის გამოყენებით: auto და flex CSS თვისებები. ყუთი-4 ბლოკი რჩება ნაგულისხმევ მდგომარეობაში დოკუმენტის ნაკადში.

კორპუსი ( ჩვენება: მოქნილი; ) .box-1, .box-2, .box-3 ( ჩვენება: flex; ზღვარი: ავტომატური; )

სხეული ( ჩვენება: flex; ყუთი-1, ყუთი-2, ყუთი-3 ( ჩვენება: flex; ზღვარი: ავტო;

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

.box-4 პოზიციონირების გარეშე რასთან შედარებით?

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

• რომელი მშობელი გახდება ამოსავალი წერტილი;
• გადაადგილების რაოდენობა საცნობარო წერტილთან შედარებით (ზედა, ქვედა, მარჯვნივ ან მარცხნივ).

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

.box-4 აბსოლუტური პოზიციონირებით ოფსეტის გარეშე

ახლა დავამატოთ თვისებები ზედა: 0 და მარცხენა: 0. ელემენტმა უნდა განსაზღვროს, რომელი მშობელი კონტეინერი გახდება ამ კოორდინატებისთვის საცნობარო წერტილი. უახლოესი ელემენტი არასტატიკური პოზიციით (ყველაზე ხშირად პოზიცია: ნათესავი) ხდება იგი. box-4 იწყებს წინაპრების სათითაოდ დაკითხვას. არც box-3, არც box-2 და არც box-1 არ არის შესაფერისი, რადგან მათ აქვთ ნაგულისხმევი პოზიციონირება CSS-ში (დაუყენებელი).

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

.box-4 აბსოლუტური პოზიციონირებით. მშობელი ელემენტები პოზიციონირების გარეშე

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

.box-4 აბსოლუტური პოზიციონირებით. .ყუთი-1 შედარებითი პოზიციონირებით

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

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

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

.box-4 აბსოლუტური პოზიციონირებით. .ყუთი-2 შედარებითი პოზიციონირებით

ანალოგიურად Box-3 კონტეინერისთვის:

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

ბლოკის ელემენტების მახასიათებლები

ბლოკის ტეგები მოიცავს ტეგებს, რომლებიც ხაზს უსვამენ ტექსტის ინფორმაციის დიდ რაოდენობას: , ,

, , ,

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

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

დოკუმენტის ნაკადი

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

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

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

• ნათესავი;
• აბსოლუტური;
• ფიქსირებული;
• სტატიკური.

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

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

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



თვისებების გამოყენება შედარებითი პოზიციონირებისთვის

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

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



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

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

ელემენტების გასწორება ცენტრთან

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



პოზიციონირება ბრაუზერის ზედა მარცხენა კუთხესთან შედარებით

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



პოზიციონირება ბრაუზერის ზედა მარჯვენა კუთხესთან შედარებით

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

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

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



მინიშნება წერტილი აბსოლუტურად განლაგებული ელემენტისთვის

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



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

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

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

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

ბლოკების გამოყენებით განლაგების ერთ-ერთი მთავარი სირთულე არის იმავე ბლოკების განლაგება (განლაგება).

ცოტა ფენების შესახებ

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

HTML-ში ფენები არ არის. ეს უბრალოდ მეტაფორაა. როდესაც ვსაუბრობთ ფენებზე, ისინი გულისხმობენ გარკვეულ html კონტეინერს (ელემენტს), რომელიც შეიძლება განთავსდეს ვებ გვერდზე გარკვეულ ადგილას.

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

), სიები (

) და სხვა ელემენტები.
ახლა კი დაახლოებით აჰ.

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

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

ელემენტების განლაგება.

პოზიციონირების ოთხი ძირითადი ტიპი არსებობს:

1. სტატიკური
2. აბსოლუტური
3. დაფიქსირდა
4. ნათესავი

სტატიკური

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

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

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

აბსოლუტური

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

დაფიქსირდა

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

ნათესავი

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

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

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

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

შეაჯამეთ.

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

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

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


ახლა ვნახოთ, როგორ არის დაყენებული კოორდინატები.

ამ მიზნებისათვის გამოიყენება ოთხი ტიპის თვისებები:

1. ზედა
2 დარჩა
3.მარჯვნივ
4. ქვედა

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

მარცხნივ - მარცხნივ ან მარჯვნივ გადაწევა, ნიშნის მიხედვით. ზედა მარცხენა კუთხესთან შედარებით.

მარჯვენა - ცვლა მარჯვნივ და მარცხნივ, ნიშნის მიხედვით. ზედა მარჯვენა კუთხესთან შედარებით.

ქვედა - ცვლა ზევით ან ქვევით, ნიშნის მიხედვით. გვხვდება ქვედა მარცხენა კუთხესთან შედარებით.

აი HTML კოდი:









და ეს არის CSS:

#1 {
პოზიცია:ნათესავი;
ზედა: 100 პიქსელი;
მარცხენა: 100px;
სიგანე: 500px;
სიმაღლე: 500px;
ფონის ფერი:#CCCCCC;
}

#11 {
background-color:#003399;
პოზიცია:აბსოლუტური;
ქვედა: -30px;
მარჯვნივ: -50px;
სიგანე: 100px;
სიმაღლე: 100px;
}

#2 {
ფონის ფერი:#990066;
სიგანე: 200 px;
სიმაღლე: 300px
}

ივარჯიშე.

როცა ვწერდი, მე თვითონ მივხვდი.

ვლად მერჟევიჩი

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

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

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

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

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

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

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

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

რეჟიმი ხასიათდება შემდეგი მახასიათებლებით.

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

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

მაგალითი 3.31. ჩარჩოების ანალოგის შექმნა

აბსოლუტური პოზიციონირების სხეული ( ზღვარი: 0; ) #გვერდითი ზოლი, #შინაარსი ( პოზიცია: აბსოლუტური; ) #გვერდითი ზოლი, #შინაარსი ( გადადინება: ავტო; padding: 10px; ) #header ( სიმაღლე: 80px; /* ფენის სიმაღლე */ ფონი: #FEDFC0; ბოლოში: 2px მყარი #7B5427 ) #header h1 ( padding: 20px; margin: 0; ) #გვერდითი ზოლი (სიგანე: 150px; ფონი: #ECF5E4; 1px მყარი #231F20; ზევით: 8p; . */ ქვედა: 0 ;

ფერგანას სტილის პილაფი

უზბეკური პილაფი

ციმბირული პილაფი

იტალიური პილაფი

ესტონური პილაფი

ამერიკული სტილის პილაფი

ინდური სტილის პილაფი

ფერგანას სტილის პილაფი

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

ბრინჯს დააფარეთ თანაბარი ფენა, გააცხელეთ ცეცხლი და დაუყონებლივ დაასხით წყალი ისე, რომ ბრინჯს ფარავდეს 1–1,5 სმ-ით, როგორც კი წყალი აორთქლდება, დაჭრილ კოვზს აგროვებთ პილაფს შუაზე. ჯოხით რამდენიმე ადგილას გახვრეტით ისე, რომ ზედაპირზე წყალი ძირამდე წავიდა. შემდეგ დააფარეთ პილაფს და გააჩერეთ 20–25 წუთის განმავლობაში.

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

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



ბრინჯი. 3.43. აბსოლუტური პოზიციონირების გამოყენება

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

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

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

მაგალითი 3.32. ხელსაწყოების სტილი

#floatTip (პოზიცია: აბსოლუტური; /* აბსოლუტური პოზიციონირება */ სიგანე: 250 პიქსელი; /* ბლოკის სიგანე */ ჩვენება: არცერთი; /* დამალვა ეკრანიდან */ საზღვარი: 1px მყარი #000; /* ჩარჩოს პარამეტრები */ padding: 5px /* შრიფტის გარშემო */ font-family: sans-serif */ font-size: 9pt; /* Ფონის ფერი */ )

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

მაგალითი 3.33. ფენის გამომავალი სკრიპტი

Document.onmousemove = moveTip; ფუნქცია moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // ფენის სიგანე // IE ბრაუზერისთვის if (document.all) ( x = event.x + document.body.scrollLeft y = event.y + document.body.scrollTop // სხვა ბრაუზერებისთვის ) else (x = e.pageX; // კურსორის X კოორდინატი y = e.pageY; // კურსორის Y კოორდინატი) // აჩვენეთ ფენა კურსორის მარჯვნივ, თუ ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

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

მაგალითი 3.34. ინსტრუმენტული მინიშნების შექმნა

ხელსაწყოს მინიშნება #floatTip (პოზიცია: აბსოლუტური; სიგანე: 250 პიქსელი; ეკრანი: არცერთი; კონტური: 1px მყარი #000; შიგთავსი: 5px; შრიფტის ოჯახი: sans-serif; შრიფტის ზომა: 9pt; ფერი: #333; ფონი: # ECF5E4 გამჭვირვალობა: 0.85 /* ფენის გამჭვირვალობა */ )

" + "ლინზა: Canon EF 24-105 f/4L IS USM
" + "Flash: Canon Speedlite 580 EX
" + "ჩამკეტის სიჩქარე: 1/125
დიაფრაგმა: 5.6")" onmouseout="toolTip()" />

ამ მაგალითის შედეგი ნაჩვენებია ნახ. 3.44. გთხოვთ გაითვალისწინოთ, რომ ტექსტის შეფუთვა toolTip() ფუნქციის გამოძახებისას არის წაკითხვის მიზნებისთვის და არის JavaScript სინტაქსში. Safari-ში ტექსტის შეფუთვისას სკრიპტი ზოგჯერ არ მუშაობს, ამ შემთხვევაში ტექსტი უნდა დაიწეროს ერთ ხაზზე. სტილებს დაემატა CSS3 გამჭვირვალობის თვისება, რაც ანიჭებს ფენას ოდნავ გამჭვირვალობას. ეს თვისება არ არის მხარდაჭერილი IE-ში 9.0 ვერსიამდე.



ბრინჯი. 3.44. ინსტრუმენტების მინიშნება შესრულებულია JavaScript-ის გამოყენებით

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

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

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

მაგალითი 3.35. ფიქსირებული სარდაფი

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

ფიქსირებული ქვედა კოლონტიტული BODY ( margin-bottom: 50px; ) #footer (პოზიცია: ფიქსირებული; /* ფიქსირებული პოზიცია */ მარცხენა: 0; ქვედა: 0; /* ქვედა მარცხენა კუთხე */ padding: 10px; /* მინდვრები ტექსტის გარშემო */ ფონი: #39b54a; ავტორი არ იძლევა გარანტიას თქვენს უსაფრთხოებაზე მათი გამოყენებისას და უარს ამბობს ყველა პასუხისმგებლობაზე შედეგებზე. გახსოვდეთ, ლომი მტაცებელი და საშიში ცხოველია! ვლად მერჟევიჩი

მაგალითის შედეგი ნაჩვენებია ნახ. 3.45. იმის გამო, რომ ფიქსირებული ქვედა კოლონტიტული გადაფარავს და მალავს ტექსტს, ქვედა შიგთავსი დაემატა BODY ამომრჩეველს. IE6 არ უჭერს მხარს ფიქსირებულ მნიშვნელობას, ამიტომ ეს მაგალითი იქ სწორად არ იმუშავებს.



ბრინჯი. 3.45. ქვედა კოლონტიტული გვერდის ბოლოში

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

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



ბრინჯი. 3.46. მარცხენა და ზედა ქონების მნიშვნელობები შედარებითი პოზიციონირებისთვის

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



ბრინჯი. 3.47. მარჯვენა და ქვედა ქონების მნიშვნელობები შედარებითი პოზიციონირებისთვის

შედარებითი პოზიციონირება ხასიათდება შემდეგი მახასიათებლებით.

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

მაგალითი 3.36 გვიჩვენებს, რომ სათაური ტექსტი ქვევით მოძრაობს, რათა მას წერის განსხვავებული სტილი მისცეს.

მაგალითი 3.36. ტექსტის სათაური

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

სათაური H1 ( შრიფტი: თამამი 2em Arial, Tahome, sans-serif; /* შრიფტის პარამეტრები */ ფერი: #fff; ფონი: #375D4C; padding: 0 10px; ) H1 SPAN ( პოზიცია: შედარებითი; /* შედარებითი პოზიციონირება */ ზედა: 0.3em;

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

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



ბრინჯი. 3.48. ტექსტის გადატანა თავდაპირველ პოზიციასთან შედარებით

წყობილი ფენები

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



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

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

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

მოკლე ტექსტი მარჯვნივ

.raz ( ტექსტის გასწორება: მარჯვნივ; ) მოკლე ტექსტი მარჯვნივ .raz ( ზღვარი: 0; საზღვრის ზედა: მყარი 2 პიქსელი; ბალიშები: 0; გადინება: ავტო; /* წმინდა ათწილადი */) .raz li ( ნათელი: ორივე; ) .raz span ( float: უფლება; white-space: nowrap; /* */ ) დაკავშირებული მასალები:

• განახლებულია ჰორიზონტალური html გასწორება
• html სიგანის გასწორების განახლება მინდა
  როგორ გავასწოროთ ბლოკი მარჯვნივ

  .raz div ( max-width: 8em; /* ბლოკი იკავებს მშობლის სიგანეს, მაქსიმალური სიგანე ზღუდავს მას */წთ-სიმაღლე: 2მ; ზღვარი-მარცხნივ: ავტო; margin-right: 0; HTML კოდი

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

  .raz ( პოზიცია: ნათესავი; padding-right: 8em; /* ისე, რომ ელემენტი არ იყოს მშობლის კონტენტის თავზე */) .raz div ( პოზიცია: აბსოლუტური; ზედა: 0; /* მიამაგრეთ მშობლის თავზე */მარჯვნივ: 0; HTML კოდი ტექსტი

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

  .raz div ( float: მარჯვნივ; /* ბლოკი იკავებს შინაარსის სიგანეს, მაქსიმალური სიგანე ზღუდავს მას */მაქსიმალური სიგანე: 8 ემ; წთ-სიმაღლე: 2მ; საზღვარი: 1px მყარი ნარინჯისფერი; ფონი: #fff5d7; ) HTML კოდი ტექსტი

  .raz ( text-align: right; ) .raz div ( ჩვენება: inline-block; /* inline-ბლოკი იკავებს შინაარსის სიგანეს, მაქსიმალური სიგანე ზღუდავს მას */მაქსიმალური სიგანე: 8 ემ; მინ-სიმაღლე: 2მ; საზღვარი: 1px მყარი ნარინჯისფერი; text-align: დაწყება; /* ტექსტის გასწორების მემკვიდრეობის წაშლა */ფონი: #fff5d7; ) HTML კოდი

  როგორ გავასწოროთ რამდენიმე ბლოკი მარჯვნივ

  .raz div ( სიგანე: 8em; მაქსიმალური სიგანე: 100%; წთ-სიმაღლე: 2em; კონტური: 1px მყარი ნარინჯისფერი; ფონი: #fff5d7; )

  .raz ( text-align: right; ) .raz div ( ჩვენება: inline-block; /* სმ. */სიგანე: 8 მ; მაქსიმალური სიგანე: 100%; მინ-სიმაღლე: 2მ; საზღვარი: 1px მყარი ნარინჯისფერი; ვერტიკალური გასწორება: შუა; /* სმ. */ text-align: დაწყება; ფონი: #fff5d7; )

  .raz div ( სიგანე: 8em; მაქსიმალური სიგანე: 100%; წთ-სიმაღლე: 2em; ზღვარი: 0 0 0 ავტო; /* იგივე margin-left: auto; */საზღვარი: 1px მყარი ნარინჯისფერი; ფონი: #fff5d7; )

  .raz div ( float: მარჯვნივ; სიგანე: 8em; მაქსიმალური სიგანე: 100%; min-სიმაღლე: 2em; საზღვარი: 1px მყარი ნარინჯისფერი; ფონი: #fff5d7; ) .raz::after ( /* წმინდა ათწილადი */შინაარსი: ""; ჩვენება: ბლოკი; ნათელი: ორივე; ) ზღვარი: 0 100% 0 -100%; /* თქვენ არ გჭირდებათ სხვა შეფუთვის დამატება, მაგრამ წინა სტილში მიუთითეთ transform: translate(-100%, 0); */ფონი:მწვანე; ) HTML კოდი