CSS z-index: მიმოხილვა, თვისებები

რეგლამენტის CSS z-index - გვერდი ელემენტს პოზიცია კოორდინაცია Z: დონე ჩვენება ელემენტს ან შრე, რომელიც მდებარეობს. საკვანძო რომ აქვს z-index მეტი იქნება სრული. Tags ნაჩვენები, რათა მათ, როგორც ჩანს, შემომავალი ნაკადების და გადახურვა. приоритет видимости. Z-ინდექსის მნიშვნელობა განსაზღვრავს ხილვადობის პრიორიტეტია.

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

ზოგადი წესი: წესრიგი და დონე

შეყვანილი ნაკადი (გვერდი ჩამოყალიბდა სერვერზე) თანამიმდევრულად ნათქვამია ბრაუზერში. ყველა tags ნაჩვენები შესაბამისად CSS წესები და შეიძლება გადახურვა.

ეს მაგალითი აღწერს ოთხ ხილული ელემენტს. ყოველი მომდევნო ფარავს წინა ერთი. იმ ადგილებში, სადაც tags გადმოკვეთა, არ არსებობს საკითხი პრიორიტეტული. როგორც წესი z-index CSS ტეგების ყველა ეს იგივე და ტოლია 848, აშკარა გახდება, რომ ელემენტს, რომელიც მიდის ასეთია. ყველა რომ peeks out from ქვეშ ყოველ მომდევნო ელემენტი, როგორც ჩანს.

წესი ხილვადობა

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

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

გავლენა ელემენტს მასივი

საკმარისია მესამე tag scCSS3 გაზრდის z-index, და scCSS4 - შეამციროს ის, საერთო სურათი შეიცვალა. თანმიმდევრობა ელემენტების ნაკადი იგივე რჩება:

• id= 'scCSS1'; div id = "scCSS1 ';
• id= 'scCSS2'; div id = "scCSS2 ';
• id= 'scCSS3'; div id = "scCSS3 ';
• id= 'scCSS4'. div id = "scCSS4".

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

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

კომბინაცია z-index to ფონის ფერი

აღსანიშნავია, რომ თვისებები CSS background & z-index ავსებენ ერთმანეთს. ყველა ბლოკი დონის ელემენტები, და ნებისმიერი სხვა, ყოველთვის დაიკავებს მართკუთხედის ფართობი ჩამოყალიბდა მაქსიმალური სიმაღლე და მაქსიმალური სიგანე შინაარსი.

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

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

გამოყენება თვისებები CSS z-index ელემენტს, რომლის ფონზე ფერადი მნიშვნელობა გამჭვირვალე (სახის გამჭვირვალობა), შეგიძლიათ emulate ნებისმიერი ჩართვა ელემენტს. მიუხედავად იმისა, რომ ნებისმიერ შემთხვევაში, სინამდვილეში ელემენტს არის მართკუთხა.

ღონისძიებები და ხილული ელემენტები

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

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

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

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

სურათის ფორმატი

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

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

Browser შეცდომები და დეველოპერი

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

წერით HTML და CSS, ბრაუზერის თითქმის არ შეცდომები - ეს არის აქსიომა. თუ სასურველი ნივთი არ მოხდა, მაშინ, დიზაინი CSS {პოზიცია: აბსოლუტური; z-ინდექსი: 112233; მარცხენა: 10px; დაბრუნება: 20px; } ... რაღაც აკლია ან არ არის ჩაწერილი.

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

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

გამოყენება jQuery.css (z-ინდექსი, 123) შეიძლება გამოიწვიოს შეცდომა, თუ არ მიმართა კლასის ან იდენტიფიკატორი. გარდა ამისა, jQuery - მართლაც შესანიშნავი განვითარების ინსტრუმენტი. თუმცა, სანამ ვრცელდება, არ დაშავებულა ვფიქრობ: არის შესაძლებელი ქაღალდების თვითნაკეთი ნიშნავს HTML / CSS, z-index - არ არის წესი, რომელიც არ საჭიროებს დაუყოვნებლივ ყურადღებას.

სწორი მოძრაობა ლოგიკური ფენებს და

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

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

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

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

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

როგორც წესი, დეველოპერი ირჩევს საყვარელი ნომერი, და აძლევს მას ყველა tags in a row, და ის ფაქტი, რომ ჩვენ უნდა როგორმე გამოირჩევა, ანიჭებს შემდეგი ნომერი. მნიშვნელობას ვანიჭებთ ფენებს და დონის გვერდები - არ არის განსაკუთრებით პროგრესული და პერსპექტიული პრაქტიკა.

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