x

Einloggen

Hast du noch keinen Account? Jetzt registrieren!

Вучымся CSS пазіцыянаванню за дзесяць крокаў

Original on www.barelyfitz.com

У гэтым кіраўніцтве разглядаюцца розныя ўласцівасці макета даступныя ў CSS: position:static, position:relative, пасада: абсалютнай, і float.


1. position:static




Па змаўчанні пазіцыянавання для ўсіх элементаў position:static, а значыць, элемент не пазіцыянуецца і адбываецца там, дзе гэта звычайна было ў гэтым дакуменце.

Звычайна вы не павінны вызначаць гэта, калі вам неабходна перавызначыць пазіцыянаванні, якія былі раней усталяваныя.


#div-1 {
position:static;
}

2. position:relative




Калі вы пакажыце размяшчэнне: сваяк, тыя вы можаце выкарыстоўваць верхнюю ці ніжнюю, а налева ці направа для перасоўвання элемента ў адносінах да якой ён, як правіла, адбываюцца ў дакуменце.

Давайце рухацца DIV-1 на 20 пікселяў, а злева 40 пікселяў:


#div-1 {
position:relative;
top:20px;
left:-40px;
}

Звернеце ўвагу на месца, дзе Div-1 звычайна было б, калі б мы не пераехалі яе: зараз гэта пустая прастора. Наступны элемент (div-after) не зварухнуўся, калі мы пераехалі Div-1. Гэта таму, што Div-1 дагэтуль акупуе, што першапачатковае месца ў гэтым дакуменце, хоць у нас ёсць у руках.

Уяўляецца, што position:relative не вельмі карысны, але ён будзе выконваць важную задачу пазней у гэтым кіраўніцтве.


3. position:absolute




Калі вы паказваеце position:absolute, элемент будзе выдалены з дакумента і змешчаны менавіта там, дзе вы кажаце яму ісці.

Давайце рухацца DIV-1а ў правым верхнім куце на старонцы:


#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

Звернеце ўвагу, што гэтым разам, бо Div-1a быў выдалены з дакумента, іншых элементаў на старонцы былі змесцаваны па-рознаму: Div-1b, Div-1C,-і <пасля паднялася з DIV-1a ужо не было.

Таксама адзначым, што DIV-1a змяшчаўся ў правым верхнім куце старонкі. Добра, каб мець магчымасць становішча рэчаў непасрэдна на старонцы, але гэта не мае абмежаванае значэнне.

Тое, што я сапраўды жадаю, каб пазіцыя Div-1a па стаўленню да Div-1. А вось дзе адносная пазіцыя вяртаецца ў гульню.


Нататкі


  • Існуе памылка ў браўзары IE Windows: калі вы пакажыце адносную шырыню (напрыклад, "шырыня: 50%"), то шырыня будзе заснавана на бацькоўскім элеменце, а не на пазіцыянаванне элемента.

4. position:relative + position:absolute




Калі мы ўсталюем адноснае пазіцыянаванне на Div-1, у рамках якіх-небудзь элементаў DIV-1 будзе размешчаны ў адносінах да Div-1. Тады, калі мы ўсталёўваем абсалютнае пазіцыянаванне на Div-1a, мы можам перамясціць яго ў правым верхнім куце Div-1:


#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. 2 слупка абсалютны




Зараз мы можам зрабіць два макета з выкарыстаннем адносных і абсалютнае пазіцыянаванне!


#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

Адным з пераваг выкарыстання абсалютнага пазіцыянавання з'яўляецца тое, што мы можам становішча элементаў у адвольным парадку на старонцы, незалежна ад парадку іх з'яўлення ў HTML. Таму я стаўлю DIV-1B да Div-1a.

Але пачакайце - што здарылася з іншымі элементамі? Яны ў наш час застаўся ў цені з абсалютным пазіцыянаваннем элементаў. Што мы можам зрабіць па гэтай нагодзе?


6. 2 слупок абсалютная вышыня




Адным з рашэнняў з'яўляецца ўсталёўка фіксаванай вышынёй па элементах.

Але гэта не з'яўляецца прымальным рашэннем для большасці праектаў, таму што звычайна мы не ведаем, колькі тэкст будзе ў элементах, ці дакладнага памеру шрыфта, які будзе выкарыстоўвацца.


#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

7. Плаваючы блок




Для слупкоў зменнай вышыні, абсалютнае пазіцыянаванне не працуе, так што давайце прыдумалі іншае рашэнне.

Мы можам "плаваць" элемент правесці яго як мага направа ці налева, і дазволіць тэкст абгарнуць вакол яго. Гэта звычайна выкарыстоўваецца для малюнкаў, але мы будзем выкарыстоўваць яго для больш складаных задач, макет (таму што гэта адзіная прылада, у нас ёсць).


#div-1a {
float:left;
width:200px;
}

8. Плаваючы блок калоны




Калі мы плывём адзін слупок налева, то і Плаваючы блок другой калонцы злева, яны будуць пхаць сябар супраць сябра.


#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

9. Плаваючы блок калоны з выразнымі




Затым, пасля плывучыя элементы можна "ачысціць" усплывае націснеце астатняга змесціва.


#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

10. Адказнасць і рэсурсы




Гэтыя прыклады з'яўляюцца надзвычай спрошчанай і не выклікаюць некаторыя памылкі CSS у IE браўзарам Windows (у тым ліку Ёсць шмат).

На наступнай старонцы была неацэнная:
Адносна абсалютных

Хоць вы тут праверыць наступнае:


Ці дапамагло гэта падручнік навучыць вас штосьці новае? Калі гэта так, купіць мне піва!