На разсъмване дизайн идея HTML маркиране Други офис се извършва главно с помощта на таблици. Маси използват винаги, когато е възможно. Например, за да добавите отстъп отляво, направи празна колона маса. Ако е необходимо да се поставят няколко елементи в таблица клетки, се добавя друга загнездена маса.
В резултат на това на крайния код на документа е много силно вграден код, състоящ се от голям брой маси. Понякога ми напомня за една програма в Basic, която пише за в училище. Ние не знаехме, че има функции и процедурно програмиране, така че нашите програми са един непрекъснати "спагети" с дълбоко ниво на влагане.
Сега, по-голяма популярност (най-вече в стила на Web 2.0), без да набира маса начин за оформление на уеб страници въз основа на позицията на CSS собственост. Дори в някои вакантно място видях ключово изискване за уеб дизайнер е възможността да се наложи без маси HTML код.
Как се инсталира елементи за позициониране
За да инсталирате позиционирането на съществуващата позиция CSS собственост. Това може да отнеме една от петте стойности:
Стойността по подразбиране на този имот е равен - статичен. Т.е. Ако стойността позиция не е изрично посочено, елементът ще бъде статично позиционирани. Това е важно. Стойността на имота на позиция не се наследява по подразбиране. За стойността наследена от майка елемент, е необходимо за детето елемент изрично определен собственост позиция е равна на наследява, например:
a.link позиция: наследи;
>
В този случай, позоваването на позициониране е същата като тази на елемента майка.
статично позициониране
Статично позициониране - това е, като цяло, не е позициониран на всички. Тя не трябва да бъде изрично, тъй като това е стойността по подразбиране. Един от възможните варианти на изрично използването му - той отменя глобалното правило се прилага по-рано. Ето един прост пример:
В този случай, абсолютно положение всички елементи Разделение възложени. Но тези елементи, които са основали ИД = "нов" позициониране е статичен. Грубо казано, второто правило отменя първи за някои елементи.
Статично позициониране означава, че елементът се намира веднага след елемент, който го предхожда в структурата на документа HTML в.
относително позициониране
Относително позициониране - Позиционирането е относително. на самия елемент. Това не е странно да звучи - това е вярно.
Ето как става това на теория: позицията на елемент в контекста на оформлението на страницата си остава същата, както ако беше статично позициониране. Но елемент се появява на друго място, чиито координати са относителни на статично положение.
Може би не е съвсем ясно. Поради това, нека разгледаме следния пример:
В горната част на дебелото правоъгълника трябва да бъде поставен DIV, които ID = test1. Но, както се обърнахме към относителното разположение (горния и левия стойности), тя се показва на piskseley 30 по-горе и 30 пиксела в дясно (горе изместен до -30 и левия ръб 30) за него.
Продължавай. Тя ще изглежда, че премахнахме test1 елемент. Въпреки това, погледнете елемент test2. Това е все едно test1 елемент няма да бъде изместен (т.е. би бил статично разположени).
Това е основната характеристика на динамично позициониране. Точка се показва изместен, обаче, структурата на уеб документ не е променена.
Какво би ви попитам члена на изместване от първоначалното си положение, има четири свойства: наляво, надясно, отгоре, отдолу. Тези свойства означава - да се премести съответния ръб елемент: ляво, дясно, отгоре, отдолу. Стойностите на тези свойства могат да бъдат отрицателни, което означава промяна в обратна посока (в ляво и дясно - ляво и отгоре надолу - до).
Съответно, то няма смисъл да се уточни свойствата на върха, така и отдолу, както и наляво и надясно. Един от тези параметри ще бъдат игнорирани.
Имайте предвид, че за поведението на клетки от таблица на тези елементи в стандарта CSS 2.1 не е дефиниран, така че най-добре е да не се използват тези свойства за маси.
Може да изглежда, че използването на относително позициониране е доста ограничен. Но след това ще видим как да използвате този имот.
абсолютно позициониране
Ако зададете абсолютно позициониране елемент, то тогава е напълно премахната от структурата на HTML документ. Това означава, че документът е генериран като че ли не е имало елементи. След това, в началото на "припокриване" абсолютно позиционирани елементи.
За да определите позицията на даден елемент с абсолютно позициониране се използва едни и същи четири свойства: наляво, отгоре, отдолу, нали. Това е просто смисъла на тези свойства се различава от тяхното значение в относителното разположение. С абсолютно позициониране на тези свойства се определят позициите на четирите ъгъла на елемента.
ъглови стойности могат да бъдат определени в единици на дължина (например, в пиксели), или като процент. Стойността на процент на горната и долната свойства определи процентното съотношение на височината (височина), съдържащ блок на. Стойността на процент за свойствата на лявата и дясната се определя от процента на ширината (широчина), съдържащ блок.
Какво е ", съдържаща блок"?
Това е много добър въпрос. Сега знаем защо е важно да се знае и да се разбере.
Ето какво спецификацията на CSS 2.1 на "съдържащ блок" (съдържащ блок):
Ако абсолютно позициониране елемент избран съдържаща единица е най-близо предшественик като абсолютна, относителна или фиксирана позициониране. Ако съществува като предшественик, единицата, съдържаща "база единица съдържащ" (първоначално съдържащ блок).
Опитайте се да разберете. С предшественик ясно. Най-близкото предшественик позициониране различен от статично е съдържащ елемент.
Но какво, ако не разполагате с предци, които са ясно позиционирани? И какво се разбира под понятието "база, съдържаща блок"?
Позовавайки се отново на спецификацията на CSS:
С други думи, можем да предположим, че в основата съдържа елемент - себе си е HTML документ. Това означава, че първият елемент има абсолютно позициониране ще се позиционира по отношение на целия документ. Можем да предположим, но мисля, че аз не бих го препоръчвам. За спецификация дава в ръцете на браузър (потребителския агент) на.
Тя не винаги е удобно. Много по-лесно да се позиционира на елемент от определено място на документа. Това може да се постигне чрез използване на относително позициониране.
Не забравяйте, споменах, че се говори за това, как да се използват елементи с относително позициониране? Така че сега ние знаем отговора на този въпрос.
За позициониране елемент абсолютно, но освен някакъв друг елемент, е необходимо да се уверите, че на другия елемент (който трябва да бъде предшественик в йерархията на документа за HTML) стана съдържащ блок. Това може да стане чрез определяне на относителното положение стойността на имота и без да се променя свойствата на елемента на срязване (наляво, отгоре, отдолу, дясно).
За абсолютно позиционирани елемент свойства ляво, отгоре, отдолу, под прав ъгъл елемент определят компенсира от съответните краища на съдържащ блок. Така полето: 30px означава, че елементът прав ъгъл да бъде изместен от 30 пиксела от десния край на поместващия елемент.
Ето как на теория би трябвало да работи:
Но не всички браузъри следват HTML и CSS стандарти. Един от най-важните "лошите" е Internet Explorer от Microsoft.
В този случай, IE, протича по следния начин. Ако и двете свойства, например, горната и долната част, или наляво и надясно, а след това IE пренебрегва втората стойност. Т.е. ако определени ценности и отгоре, отдолу и в същото време, IE ще използва само отгоре, отдолу и да се игнорира.
"Победа" е поведението на IE, можете да посочите само най-горната имота и отляво, и изрично посочва ширината (широчина) и височина (височина) за елемента. Ето един пример:
Този код ще се появи една и съща за всички браузъри, въпреки че не изглежда толкова елегантен като разпределението на всички четири свойства. И всичко това заради факта, че IE - най-популярният браузър в света. Искате ли да отидете на FireFox или Opera. )
За всеки от четирите свойства може да се настрои на автомобил. Това означава, че стойността на този имот е взето като ако елементът е статично позиционирани. Това е полезно, ако искате да преместите елемент във всяка една посока. Например, за елемент срязване 8 пиксела надясно, може да се напише:
Fksirovannoe позициониране
Фиксирано позициониране е много подобен на абсолюта. Единствената разлика - е, че се състои от блок - то винаги е прозореца на браузъра.
Дори когато превъртите прозорец, този елемент ще продължи да бъде на същото място на страницата.
Но трябва да се даде кредит на Microsoft. Въпреки, че те са бавно, но донесе вашия браузър, за да стандарти. По-специално, IE7 позиция: фиксирани там и дори работи както трябва. Може би някой ден ще живеят до IE, което напълно подкрепя всички стандарти :).
Z-индекс имот
Относително разположени елементи, намиращи се на едно място, както е показано в другата. Абсолютно разположени и фиксирани елементи се отстраняват от структурата на документа. И в трите случая, възможно е някои елементи да се припокриват един с друг.
За да укажете в реда, в който са показани предмети, и е въведен от Z-индекс собственост. Валидните стойности за този имот - с цели числа (включително отрицателни).
Z-индекс - това е като трето измерение на уеб страницата. Колкото по-голяма от стойността на Z-индексът, толкова по-близо до потребителя (т.е. вие) е елемент на страницата.
заключение