йННПДХМЮРШ Х ПЮГЛЕПШ   

яРЮМДЮПР CSS-P ОНГБНКЪЕР Я РНВМНЯРЭЧ ДН ОХЙЯЕКЪ ПЮГЛЕЯРХРЭ АКНВМШИ ЩКЕЛЕМР ПЮГЛЕРЙХ Б ПЮАНВЕЛ ОНКЕ НЙМЮ АПЮСГЕПЮ. оПХ РЮЙНЛ ОНДУНДЕ БНГМХЙЮЕР ЕЯРЕЯРБЕММШИ БНОПНЯ Н РНЛ, ЙЮЙ СЯРПНЕМЮ ЯХЯРЕЛЮ ЙННПДХМЮР, Б ЙНРНПНИ ЮБРНП ЯРПЮМХЖШ ОПНХГБНДХР ПЮГЛЕЫЕМХЕ ЙНЛОНМЕМРНБ ЯРПЮМХЖШ.

CSS-P НОПЕДЕКЪЕР ДБЕ ЯХЯРЕЛШ ЙННПДХМЮР: НРМНЯХРЕКЭМСЧ Х ЮАЯНКЧРМСЧ. щРН ОНГБНКЪЕР НАЕЯОЕВХРЭ ЦХАЙНЯРЭ ПЮГЛЕЫЕМХЪ ЩКЕЛЕМРНБ ЙЮЙ НРМНЯХРЕКЭМН ЦПЮМХЖ ПЮАНВЕЦН ОНКЪ НЙМЮ АПЮСГЕПЮ, РЮЙ Х НРМНЯХРЕКЭМН ДПСЦ ДПСЦЮ.

аКНЙХ - ЩРН МЕ ЮАЯРПЮЙРМШЕ РНВЙХ, ЙНРНПШЕ МЕ ГЮМХЛЮЧР МЮ ОКНЯЙНЯРХ cРПЮМХЖШ ЛЕЯРЮ. аКНЙХ - ЩРН ОПЪЛНСЦНКЭМХЙХ, ЙНРНПШЕ "ГЮЛЕРЮЧР" ОКНЫЮДЭ. рЕЙЯР Х ДПСЦХЕ ЙНЛОНМЕМРШ ЯРПЮМХЖШ ОНД АКНЙНЛ ОЕПЕЯРЮЧР АШРЭ ДНЯРСОМШЛХ ОНКЭГНБЮРЕКЧ, ОНЩРНЛС КХМЕИМШЕ ПЮГЛЕПШ АКНЙЮ ХЛЕЧР ДКЪ ЯНГДЮМХЪ HTML-ЯРПЮМХЖ МЕ ЛЕМЭЬЕЕ ГМЮВЕМХЕ, ВЕЛ ЙННПДХМЮРШ АКНЙЮ.

юАЯНКЧРМШЕ ЙННПДХМЮРШ

оПХ ХЯОНКЭГНБЮМХХ "ЮАЯНКЧРМШУ" ЙННПДХМЮР РНВЙЮ НРЯВЕРЮ ОНЛЕЫЮЕРЯЪ Б БЕПУМХИ КЕБШИ СЦНК НЙМЮ АПЮСГЕПЮ, Ю НЯХ X Х Y МЮОПЮБКЕМШ БОПЮБН ОН ЦНПХГНМРЮКХ Х БМХГ ОН БЕПРХЙЮКХ, ЯННРБЕРЯРБЕММН:

еЯКХ Б ЩРНИ ЯХЯРЕЛЕ ЙННПДХМЮР МЕЙНРНПШИ АКНВМШИ ЩКЕЛЕМР ДНКФЕМ АШРЭ ПЮГЛЕЫЕМ МЮ 10px МХФЕ БЕПУМЕЦН НАПЕГЮ ПЮАНВЕИ НАКЮЯРХ АПЮСГЕПЮ Х МЮ 20px ОПЮБЕЕ ОПЮБНЦН ЙПЮЪ ПЮАНВЕИ НАКЮЯРХ АПЮСГЕПЮ, РН ЕЦН НОХЯЮМХЕ АСДЕР БШЦКЪДЕРЭ ЯКЕДСЧЫХЛ НАПЮГНЛ:

.example {position:absolute;top:10px;left:20px;}

[нРЙПШРЭ НЙМН ОПХЛЕПЮ]

б ДЮММНИ ГЮОХЯХ РХО ЯХЯРЕЛШ ЙННПДХМЮР ГЮДЮМ ЮРПХАСРНЛ position (ГМЮВЕМХЕ - absolute), ЙННПДХМЮРЮ X ГЮДЮМЮ ЮРПХАСРНЛ left (ГМЮВЕМХЕ - 20px), ЙННПДХМЮРЮ Y ГЮДЮМЮ ЮРПХАСРНЛ top (ГМЮВЕМХЕ - 10px).

юРПХАСРШ top Х left НОПЕДЕКЪЧР ЙННПДХМЮРШ БЕПУМЕЦН КЕБНЦН СЦКЮ АКНЙЮ Б ЮАЯНКЧРМНИ ЯХЯРЕЛЕ ЙННПДХМЮР.

гМЮВЕМХЪ ЙННПДХМЮР ЛНЦСР АШРЭ Х НРПХЖЮРЕКЭМШЛХ. дКЪ РНЦН, ВРНАШ САПЮРЭ ХГ НРНАПЮФЮЕЛНИ НАКЮЯРХ АКНЙ Я КХМЕИМШЛХ ПЮГЛЕПЮЛХ 100px (БШЯНРЮ) МЮ 200px(ЬХПХМЮ) ДНЯРЮРНВМН НРОНГХЖХНМХПНБЮРЭ ЕЦН ЯКЕДСЧЫХЛ НАПЮГНЛ:

.example {position:absolute;
top:-100px;left:-200px;
width:200px;height:100px;}

[нРЙПШРЭ НЙМН ОПХЛЕПЮ]

юАЯНКЧРМНЕ ОНГХЖХНМХПНБЮМХЕ ОПХЛЕМЪЕРЯЪ РНЦДЮ, ЙНЦДЮ КХАН БЯЕ ЯНДЕПФЮМХЕ ЯРПЮМХЖШ ДНКФМН АШРЭ ДНЯРСОМН АЕГ ЯЙПНККХМЦЮ ("ОПНЙПСРЙХ"), КХАН ЙНЦДЮ ЩКЕЛЕМРШ ПЮГЛЕРЙХ МЮУНДЪРЯЪ Б МЮВЮКЕ ЯРПЮМХЖШ Х ХУ БГЮХЛМНЕ ПЮГЛЕЫЕМХЕ БЮФМН Я РНВЙХ ГПЕМХЪ ДХГЮИМЮ, МЮОПХЛЕП, ДКЪ НПЦЮМХГЮЖХХ БЯОКШБЮЧЫХУ ЛЕМЧ.

нРМНЯХРЕКЭМШЕ ЙННПДХМЮРШ

дЮММЮЪ ЙННПДХМЮРМЮЪ ЯХЯРЕЛЮ ОНГБНКЪЕР ПЮГЛЕЯРХРЭ АКНЙХ МЮ ЯРПЮМХЖЕ Б ЙННПДХМЮРЮУ НУБЮРШБЮЧЫЕЦН ХУ АКНЙЮ. оПЕХЛСЫЕЯРБЮ Х МЕНАУНДХЛНЯРЭ МЮКХВХЪ РЮЙНИ ЙННПДХМЮРМНИ ЯХЯРЕЛШ НВЕБХДМШ. нМЮ ОНГБНКЪЕР ЯНУПЮМЪРЭ БГЮХЛМНЕ ПЮЯОНКНФЕМХЕ ЩКЕЛЕМРНБ ПЮГЛЕРЙХ ОПХ КЧАНЛ ПЮГЛЕПЕ НЙМЮ АПЮСГЕПЮ Х ЕЦН МЮЯРПНИЙЮУ СЛНКВЮМХЪ.

б ЙЮВЕЯРБЕ РНВЙХ НРЯВЕРЮ Б ЩРНИ ЯХЯРЕЛЕ ЙННПДХМЮР БШАПЮМЮ РНВЙЮ ПЮГЛЕЫЕМХЪ РЕЙСЫЕЦН АКНЙЮ ОН СЛНКВЮМХЧ. нЯЭ X ОПХ ЩРНЛ МЮОПЮБКЕМЮ ЦНПХГНМРЮКЭМН БОПЮБН, Ю НЯЭ Y - БЕПРХЙЮКЭМН БМХГ.

дКЪ ГЮДЮМХЪ ЙННПДХМЮР АКНЙЮ Б ЩРНИ ЯХЯРЕЛЕ ОПХЛЕМЪЧР ГЮОХЯЭ РХОЮ:

<div style="border-width:1px;border-style:solid;
width:100%;height:100px;">
<div style="position:relative;top:0px;left:0px;
border-width:1px;">
щРНР АКНЙ МЮУНДХРЯЪ Б РНВЙЕ НРЯВЕРЮ НРМНЯХРЕКЭМШУ ЙННПДХМЮР
</div>
<div style="position:relative;top:0px;left:50px;
border-width:1px;">
ю ЩРНР АКНЙ ЯЛЕЫЕМ БОПЮБН МЮ 50px
</div>
</div>

дКЪ ПЮАНРШ Я НРМНЯХРЕКЭМНИ ЯХЯРЕЛНИ ЙННПДХМЮР КСВЬЕ ОНКЭГНБЮРЭЯЪ СМХБЕПЯЮКЭМШЛХ АКНЙЮЛХ DIV. щРН ЯБЪГЮМН Я РЕЛ, ВРН Б NN, МЮОПХЛЕП, ОЮПЮЦПЮТ МЕ ЛНФЕР ЯНДЕПФЮРЭ ОЮПЮЦПЮТНБ. кЧАНИ АКНЙ МЕЛЕДКЕММН ГЮЙПШБЮЕР ОЮПЮЦПЮТ, ЯКЕДНБЮРЕКЭМН, БКНФХРЭ Б МЕЦН ВРН-КХАН МЕКЭГЪ.

яКЕДСЕР НРЛЕРХРЭ, ВРН NN БННАЫЕ МЕОПЕДЯЙЮГСЕЛ Б ПЮАНРЕ Я НРМНЯХРЕКЭМШЛХ ЙННПДХМЮРЮЛХ, ОНЩРНЛС Б МЕЛ ХУ ЯКЕДСЕР ХГАЕЦЮРЭ.

б НРМНЯХРЕКЭМНИ ЯХЯРЕЛЕ ЙННПДХМЮР ЛНФМН ОНКЭГНБЮРЭЯЪ НРПХЖЮРЕКЭМШЛХ ЯЛЕЫЕМХЪЛХ:

<div
style="position:relative;
top:0;
left:50;
border-width:1px;
border-style:solid;
width:200px;">
<a class=doc
href="javascript:
if(flag==0)
{window.document.layers[2].left=-50;flag=1;}
else
{window.document.layers[2].left=50;flag=0;};
void(0);">
яДБХМСРЭ ЯКНИ
</a>
</div>

б ДЮММНЛ ОПХЛЕПЕ ЯКНИ, ОЕПБНМЮВЮКЭМН ЯДБХМСРШИ МЮ 50 ОХЙЯЕКЕИ БОПЮБН, ОНЯКЕ МЮФЮРХЪ МЮ ЦХОЕПРЕЙЯРНБСЧ ЯЯШКЙС ЯЛЕЫЮЕРЯЪ МЮ 100 ОХЙЯЕКЕИ БКЕБН, ОНКСВЮЪ НРПХЖЮРЕКЭМСЧ БЕКХВХМС ЯЛЕЫЕМХЪ ОН НЯХ X (left:-50px). оНЯКЕ ОНБРНПМНЦН МЮФЮРХЪ МЮ ЯЯШКЙС ОНКНФЕМХЕ АКНЙЮ БНЯЯРЮМЮБКХБЮЕРЯЪ.

кХМЕИМШЕ ПЮГЛЕПШ АКНЙЮ

кХМЕИМШЕ ПЮГЛЕПШ АКНЙЮ ГЮДЮЧРЯЪ ДБСЛЪ ОЮПЮЛЕРПЮЛХ: ЬХПХМНИ(width) Х БШЯНРНИ(height) АКНЙЮ. б АПЮСГЕПЮУ ЬХПХМЮ Х БШЯНРЮ АКНЙЮ ХМРЕПОПЕРХПСЕРЯЪ ОН ПЮГМНЛС.

б NN ЬХПХМЮ Х БШЯНРЮ АКНЙЮ - ЩРН ПЕЙНЛЕМДСЕЛШЕ ОЮПЮЛЕРПШ. еЯКХ РЕЙЯР БШУНДХР ГЮ ЩРХ НЦПЮМХВЕМХЪ, РН АКНЙ СБЕКХВХБЮЕРЯЪ ДН МЕНАУНДХЛШУ ПЮГЛЕПНБ, ЕЯКХ РЕЙЯРЮ МЕР БННАЫЕ, РН АКНЙ ЯФХЛЮЕРЯЪ ДН ЛЮКЕМЭЙНЦН ЙБЮДПЮРЮ:

<p style="width:200px;
height:100px;
background-color:darkred;
color:white;">
...
</p>

рЕЙЯР ПЮГЛЕЫЕМ ДКЪ РНЦН, ВРНАШ АКНЙ АШК БХДЕМ Б Netscape Navigator

оПХБЕДЕММНЦН Б ОПХЛЕПЕ НОХЯЮМХЪ ДНКФМН УБЮРХРЭ ДКЪ ОНКСВЕМХЪ ПЕГСКЭРЮРЮ, МН Б NN ДКЪ РЮЙНЦН АКНЙЮ МСФМН ОПХЛЕМХРЭ МЕЙНРНПШЕ ДНОНКМХРЕКЭМШЕ ЮРПХАСРШ:

<p style="width:200px;
height:100px;
background-color:darkred;
color:white;
border-width:1px;
border-color:white;">
<span style="color:white;">
...
</span>
</p>

аЕГ ЦПЮМХЖШ АКНЙ МЕ АСДЕР ГЮКХР РЕЛМН-ЙПЮЯМШЛ ЖБЕРНЛ, Ю АЕГ span РЕЙЯР АСДЕР НРНАПЮФЮРЭЯЪ ЖБЕРНЛ СЛНКВЮМХЪ ДКЪ ДЮММНИ ЯРПЮМХЖШ. мХЙЮЙНЛС ПЮГСЛМНЛС НАЗЪЯМЕМХЧ РЮЙНЕ ОНБЕДЕМХЕ АПЮСГЕПЮ МЕ ОНДДЮЕРЯЪ, ОНЩРНЛС МЕ ЯРНХР МЮ ЩРХУ ЮРПХАСРЮУ ЯРПНХРЭ ДХГЮИМ ЯРПЮМХЖ.

ДЮКЕЕ...