CSS პოზიცია: მაგალითები

. Novice მაკიაჟი მხატვრების ხშირად განიცდიან სირთულეები პოზიციონირების ელემენტების მეშვეობით CSS . Position куда проще в освоении, чем кажется на первый взгляд. სინამდვილეში, CSS პოზიცია ქონების ბევრად უფრო ადვილია ისწავლოს, ვიდრე ეს, როგორც ჩანს, ერთი შეხედვით. მას შემდეგ, რაც მათ აითვისეს, თქვენ მიიღებთ მძლავრი იარაღს, რომელთანაც შეგიძლიათ ყველა ადგილის გვერდის სწორად მოწყობა. добиться результата, нужно знать обо всех существующих значениях, поскольку принципы их действия сильно различаются მაგრამ შედეგის მისაღწევად, თქვენ უნდა იცოდეთ ყველა არსებული ღირებულების შესახებ, რადგან მათი მოქმედების პრინციპები ძალიან განსხვავებულია

დოკუმენტის ნაკადის მშენებლობის სპეციფიკა

работает с потоком веб-страницы. პოზიცია CSS მუშაობს ვებ გვერდიდან. როგორ შეიძლება ამის გაგება? html- разметке. ჩვეულებრივ, გვერდის ყველა ელემენტი არის ბრძანებით, რომელშიც თქვენ შექმენით ისინი HTML- ში . header расположен над тегом footer, то и на странице он будет отображаться выше. თუ სათაურის ტეგი მდებარეობს ქვედა კოლონტიტულ ტეგიზე , იგი ასევე გამოჩნდება ზემოთ გვერდზე. footer в html над «хедером», «подвал» страницы будет отображаться над «шапкой». პირიქით, თუ თქვენ გადაწყვიტეთ, რომ ქვედა კოლონტის განთავსება HTML- ზე "სათაურს", გვერდზე "სარდაფი" გამოჩნდება "სათაურს" ზემოთ. ამ შემთხვევაში ბლოკ ელემენტები მათთვის ხელმისაწვდომი ყველა სიგანეს იკავებს. ქვედა საქმეები, თავის მხრივ, ერთ ხაზზეა განთავსებული, სანამ არ დაიკავებენ ყველაფერს და შემდეგ დაიწყებენ ახალს. ეს ბრძანება ეწოდება "დოკუმენტის ნაკადს".

ნაკადი ქცევის ცვლილების შესაცვლელად, გამოიყენე თანამდებობა ქონება . CSS- ში . float, но его мы рассматривать не будем. მას ასევე შეუძლია შეცვალოს float ქონების , მაგრამ ჩვენ არ განიხილავს მას. პოზიციონირების საშუალებით თქვენ შეგიძლიათ აიძულოთ ელემენტს "ნულიდან" ჩამოიშოროს ნორმალური თემა, რის შემდეგაც იგი დაიწყებს ახალ გზას იქცევა. როგორ ზუსტად - დამოკიდებულია გამოყენებული ღირებულების ქონება.

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

или статическое позиционирование, является значением по умолчанию для всех блоков html, которые вы создали. პოზიცია: სტატიკური, ან სტატიკური პოზიცია, არის ნაგულისხმები მნიშვნელობა ყველა HTML ბლოკად, რომლითაც შეიქმნა. ნორმალურ პირობებში, თქვენ არ უნდა გაუმკლავდეთ მას. static. თუ პოზიცია არ არის მითითებული ნებისმიერი ბლოკის ან რიგისთვის, მას აქვს მნიშვნელობა სტატიკური. გვერდზე, ასეთი კომპონენტი ნაჩვენები იქნება ნაკადის შესაბამისად. right/left или top/bottom, никакого эффекта не будет. თუ მიუთითეთ მარჯვენა / მარცხენა ან ზედა / ქვედა თვისებები , არ იქნება ეფექტი.

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

оказывается вне нормального потока документа. ამ ქონების გამოყენებისას ელემენტის გარეთ ხდება დოკუმენტის ნორმალური ნაკადი. относительно окна браузера, независимо от того, как размещаются прочие компоненты. ახლა მისი პოზიცია გამოითვლება ბრაუზერის ფანჯრის შედარებით, მიუხედავად იმისა, თუ როგორ ხდება სხვა კომპონენტები განთავსებული. : fixed отправится в верхнюю часть страницы, прижмется к краю окна браузера, а прочие элементы займут его место в соответствии с потоком. სხვა სიტყვებით რომ ვთქვათ, ბლოკი პოზიციაზე : ფიქსირდება გვერდის ზედა ნაწილზე, დააჭერთ ბრაუზერის ფანჯრის ზღვარზე და სხვა ელემენტები დაიბლოკება მისი ნაკადით.

ფიქსირებული პოზიციის ძირითადი ელემენტია ის, რომ მათ შეუძლიათ სხვა ბლოკებისა და გვერდის ხაზების გადახურვა. : fixed будет будто бы оставаться на месте, не исчезая с экрана. როდესაც სენსორული, ბლოკი პოზიცია : ფიქსირებული გამოჩნდება დარჩენა ადგილი, არ გაქრეს ეკრანზე. ეს სასარგებლოა, თუ ნავიგაციის ან მსგავსი ელემენტის გაკეთება საჭიროა, რომ მომხმარებელს ყოველთვის უნდა ჰქონდეს წვდომა. ფიქსირებული პოზიცია ასევე ვრცელდება თუ გსურთ განათავსოთ სწრაფი სენსორული ღილაკი კონკრეტული ნაწილის გვერდზე.

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

. ამ ქონების გამოყენება ე.წ. ნათესავი პოზიციაა . : relative, тот останется на своем месте. თუ საქონელს მიუთითეთ საქონელი : შედარებით ქონება, საქონელი დარჩება მის ადგილზე. right/left и top/bottom. ერთი შეხედვით, არაფერი არ მოხდება, მაგრამ ყველაფერი შეიცვლება, თუ დამატებით გამოიყენებთ მარჯვენა / მარცხენა და ზედა / ქვედა თვისებებს . მათი დახმარებით თქვენ შეგიძლიათ გააკონტროლოთ კომპონენტის გადაადგილება მისი ადგილმდებარეობის მიხედვით. останутся на своих положениях, не обращая внимания на освободившееся место . იმ ადგილას, სადაც ბლოკი ან ხაზი იყო ადრე, იქნება ცარიელი სივრცე - სხვა ელემენტები დარჩება მათ პოზიციებზე და არა ვაკანტურ ადგილას .

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

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

ერთ-ერთი ყველაზე საინტერესო და ყველაზე ხშირად გამოყენებული ვარიანტი. თანამდებობის პირის გამოყენებისას absolute положение компонента страницы будет высчитываться относительно окна браузера. აბსოლუტური მნიშვნელობით , გვერდის კომპონენტის პოზიცია ბრაუზერის ფანჯრის შედარებით გამოითვლება. элементы (не являющиеся абсолютно позиционированными) словно «забудут» о существовании «собрата» с Position : absolute и займут его место в потоке. სხვა ელემენტები (არ არის აბსოლუტურად პოზიცია), როგორც ჩანს, "დაივიწყოს" "კოლეგას" არსებობის შესახებ პოზიცია : აბსოლუტური და მიიღებს თავის ადგილს ნაპირს. : fixed, но есть и серьезные различия. როგორც ჩანს, ყველაფერი ზუსტად იგივეა, როგორც პოზიციის შემთხვევაში : ფიქსირებული, მაგრამ არსებობს სერიოზული განსხვავებებიც.

top/right/bottom/left. პირველ რიგში, ელემენტის პოზიცია თავისუფლად კონტროლდება - ის იყენებს ზედა / მარჯვენა / ქვედა / მარცხენა თვისებებს . bottom : 100px, блок «оттолкнется» от нижней част страницы на 100 пикселей. მაგალითად, თუ ქვედა ღირებულების 100px- ზე დააყენებთ , ბლოკი "უბიძგებს" გვერდის ბოლოდან 100 პიქსელს. მეორე, როდესაც სენსორული, "აბსოლუტური" კომპონენტი დარჩება მის ადგილზე, ნაცვლად გვერდზე.

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

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

მოდი განვიხილოთ მაგალითი. div с классом relative-div, внутри которого размещается div с классом absolute-div. თქვენ გაქვთ div ნათესავი- div კლასის , შიგნით, რომელიც div ერთად კლასის აბსოლუტური- div. : absolute. დააყენეთ პოზიცია : აბსოლუტური ქონება შიდა ბლოკში . რომელიც პირდაპირ "ფრიალებს" ნაკადიდან და გამოდის სადღაც ზემოთ, რადგან ახლა მისი მდებარეობა ბრაუზერის ფანჯრის შედარებით გამოითვლება. relative-div свойство Position : relative и «блудный сын» возвращается на место. ახლა ჩვენ მივუთითებთ პოზიციას - ფარდობითი საკუთრება ბლოკთან ნათესავი- კლასის კლასისა და "პროდიგალური შვილი" უბრუნდება მის ადგილს. თითქმის. სინამდვილეში, ეს არის მშობლის ელემენტის ზედა მარცხენა კუთხეში.

რატომ ხდება ეს? : absolute. საქმე ისაა, რომ თანამდებობა : აბსოლუტური ქონება . static, позиция начинает зависеть от родительского элемента. ჩვეულებრივ, მისი პოზიცია დამოკიდებულია ბრაუზერის ფანჯარაში, მაგრამ თუ "მშობელი" ასევე პოზიციონირებს, როგორც სტატიკური, სხვაობა დამოკიდებულია მშობლის ელემენტზე. ეს არის ძალიან მოსახერხებელი, იმიტომ, რომ თქვენ შეგიძლიათ განათავსოთ კომპონენტი ყველგან, ბრაუზერის ფანჯრის შედარებით უზარმაზარი რიცხვების გაანგარიშების გარეშე. მიღება ხშირად გამოიყენება ხატები, ღილაკები და სხვა პატარა ნივთები.

პოზიცია CSS ცენტრში

დამწყებთათვის ერთ-ერთი უმთავრესი პრობლემაა ვერტიკალურად და ჰორიზონტალურად განლაგებული ელემენტი. , сделать это проще простого. პოზიციის საკუთრების გამოყენება გონივრულად , ადვილია. CSS პოზიცია: აბსოლუტური ცენტრში არის ჩამოყალიბებული შემდეგი რედაქციით. iv с классом absolute-div, который находится в «диве» с классом relative-div. დავუშვათ, რომ თქვენ გაქვთ DIV აბსოლუტური div კლასთან ერთად , რომელიც "diva" - ში ნათესავი-განყოფილების კლასშია . "მშობელი" შედარებით შედარებულია და მისი სიგანე ტოლია მთლიანი გვერდის სიგანეზე. и высоту 400 px, абсолютное позиционирование и по умолчанию располагается в верхнем левом углу родительского элемента. "შთამომავალი" აქვს 400 px სიგანე და სიმაღლე , აბსოლუტური პოზიციონირება და, რა თქმა უნდა, მდებარეობს მშობლის ელემენტის ზედა მარცხენა კუთხეში.

top: 50 % и left: 50 %. ყველაფერი რაც თქვენ უნდა გააკეთოთ, აბსოლუტური კომპონენტია : 50% და მარცხნივ: 50%. თითქმის გაკეთდა! сдвинулся с места и оказался почти в центре, но не совсем. აბსოლუტი- div გადავიდა ადგილზე და თითქმის ცენტრში, მაგრამ არა საკმაოდ. შუა "მშობელს" შეეხება მის ზღვარზე და გვჭირდება ცენტრში "შთამომავლის" ცენტრი. margin-left и margin-right со значениями -200 px. ამის გაკეთება, თქვენ უნდა მივაწოდოთ მას ზღვარი-მარცხნივ და ზღვარი-მარჯვენა ღირებულებით -200 px. ამ გზით ჩვენ აბსოლუტურად პოზიციურ ბლოკს გადავაადგილებთ ნახევარი სიმაღლისა და სიგანე. ყველაფერი, ის ცენტრშია!

შევსების კომპონენტები

პრობლემა შეიძლება რთული იყოს, ერთი შეხედვით, "მეზობლებზე" პოზიციურ ელემენტებს "გადაფარავს". : fixed будет перекрывать все, что расположено на странице. მაგალითად, კომპონენტი პოზიცია : ფიქსირებული იქნება გადახურვა ყველაფერი გვერდზე. z-index, однако помните, что оно работает только для позиционированных элементов. შეგიძლიათ შეცვალოთ სიტუაცია z- ინდექსით ქონების გამოყენებით , მაგრამ გახსოვდეთ, რომ ეს მხოლოდ პოზიციურ ელემენტებზე მუშაობს. შესაბამისად, თუ ფიქსირებული პოზიციაზე ბლოკირება გსურთ, ეს ბლოკი ასევე უნდა განთავსდეს. მაგალითად, ნათესავი.

учший способ освоить позиционирование – рассматривать примеры Position CSS, экспериментировать и пробовать что-то свое. L uchshy გზა სამაგისტრო პოზიციონირება - განიხილოს მაგალითები თანამდებობა CSS, ექსპერიმენტი და ცდილობენ რაღაც საკუთარი. calc() – это даст возможность более гибко настраивать расположение. სცადეთ ისწავლონ, თუ როგორ გამოვიყენოთ იგი calc () ფუნქციის კომბინაციაში - ეს საშუალებას მოგცემთ უფრო მოქნილად მოერგოს ადგილმდებარეობა. თუმცა, გახსოვდეთ, რომ ეს ქონება არ არის განკუთვნილი გვერდის მთლიანი "ქსელის" აშენებაზე. მისი დახმარებით თქვენ უნდა გადაადგილება შედარებით მცირე ელემენტები, წინააღმდეგ შემთხვევაში თქვენ შეგიძლიათ ძალიან ადვილად დაბნეული.