У гэтым кіраўніцтве разглядаюцца розныя ўласцівасці макета даступныя ў 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 (у тым ліку Ёсць шмат).
На наступнай старонцы была неацэнная:
Адносна абсалютных
Хоць вы тут праверыць наступнае:
Ці дапамагло гэта падручнік навучыць вас штосьці новае? Калі гэта так, купіць мне піва!
