шари css Концепція шару або рівня була розроблена і вперше запропонована компанією Netscape. їх теги були багато в чому схожі на і . Однак з часом їм на заміну прийшло і практично повністю витіснило оригінальне рішення від Microsoft. Було запропоновано розглядати окремі блоки тексту, в тегах <SPAN> або <DIV> як шари, організувавши управління ними за допомогою їх властивостей.</p><p>Застосування шарів дозволяє створити на сторінці деяку подобу тривимірного простору, хоча насправді це лише плоскі шари з заданим порядком перекриття, як в колоді карт. За допомогою таблиць стилів CSS ми можемо задавати різні властивості верствам і позиціонувати їх. Це відкриває перед web-майстер масу можливостей, дозволяє створювати сторінки більш схожими на друкарські і дозволяє, в більшості випадків, відмовитися від небажаного використання таблиць для позиціонування вмісту.</p> <ul> <li>абсолютне позиціонування</li> <li>горизонтальне позиціонування</li> <li>вертикальне позиціонування</li> <li>Завдання висоти шару</li> <li>Завдання ширини шару</li> <li>Позиціонування в глибину</li> <li>Ви можете налаштовувати видимість</li> <li>Поняття прозорості шару</li> <li>накладення шарів</li> <li>Приклади роботи з шарами</li> </ul> <h3>абсолютне позиціонування</h3> Як і будь-яке інше властивість, властивість Position задається за допомогою таблиць стилів CSS.<br> Синтаксис: absolute><br> Воно може набувати таких значень:</p> <ul> <li>position: absolute означає, що позиціонування шару буде відбуватися щодо лівого верхнього кута сторінки.</li> <li>position: relative означає, що позиціонування шару буде відбуватися щодо того місця, де в початковому тексті він знаходиться, тобто щодо попереднього елемента.</li> <li>position: static означає, що позиціонування шару буде відбуватися щодо фону.</li> </ul> <h3>горизонтальне позиціонування</h3> <p>Позиціонування по горизонталі задається властивістю left. шляхом завдання відступу по осі X лівого верхнього кута шару щодо точки відліку, яка визначається властивістю Position<br> Синтаксис: значення><br> задається:</p> <h3>вертикальне позиціонування</h3> <p>Позиціонування по вертикалі задається властивістю top. атрибут дозволяє задати Y -коордінату лівого верхнього кута шару щодо точки відліку, яка визначається властивістю Position<br> Синтаксис: значення><br> задається:</p> <h3>Завдання висоти шару</h3> height. це властивість дозволяє задати висоту шару у вікні браузера:<br> Синтаксис: значення><br> задається:</p> <h3>Завдання ширини шару</h3> <p>width. це властивість дозволяє задати ширину шару у вікні браузера:<br> Синтаксис: значення><br> задається:</p> <h3>Позиціонування в глибину</h3> <p>z-index. це властивість дозволяє задати порядок перекриття шарами один одного, при цьому шар з більш високим індексом буде розташовуватися над шаром з низьким індексом. У разі, якщо атрибут не заданий спеціально, браузер привласнює вищий індекс шару, який у вихідному коді описаний пізніше:<br> Синтаксис: 2></p> <h3>Ви можете налаштовувати видимість</h3> <p>visibility. це властивість дозволяє задати видимість шару, присвоївши йому одне зі значень:<br> Синтаксис: inherit></p> <p>display. це властивість дозволяє задати видимість шару, візуально відрізняється від visibility тим, що зрушує попередній і наступний шари разом:<br> Синтаксис: none></p> <p>При уявній схожості властивостей шару visibility і display працюють вони по різному.<br> Приклад: | прибрати | поставити | або | приховати | показати | шар</p> <p>overflow. це властивість дозволяє задати, як виглядає текст, переповнені кордону шару, присвоївши йому одне зі значень:<br> Синтаксис: none></p> <h3>Поняття прозорості шару</h3> <p>Оскільки шар насправді являє собою блок вмісту, укладений в тегах <SPAN> або <DIV>. то за допомогою таблиць стилів CSS можна відформатувати його будь-яким з доступних способів: накласти фільтр, задати фоновий колір чи малюнок, задати стилі включеним тегами. Тоді, якщо шар не матиме фоновий колір чи малюнок ми зможемо побачити крізь нього вміст того шару, над яким він позиціонується, подібного можна досягти, вставивши малюнок .gif. у якого один з кольорів прозорий. Використовуючи дане властивість легко можна домогтися цікавих ефектів, недоступних іншими способами, що в цілому покращує зовнішній вигляд і естетичне сприйняття вмісту.</p> <h3>накладення шарів</h3> <p>Одне з найцікавіших способів застосувань властивостей шару, є одночасне оперування позиціонуванням відразу для двох шарів і більш. Задавши в кожному шарі властивостями Position значення absolute і варіюючи значення властивостей left. top. height. width і z-index ми отримаємо цікавий ефект накладення шарів один на одного, часткового або повного перекриття вмісту.</p> <h3>Приклади роботи з шарами</h3> <p>Накладення прозорого шару, ефект тіні</p> <p>Позиціонування без таблиці</p> <p>Декоративне оформлення сторінки</p> <p><html><br> <head><br> <style type=»text/css»><br> body <br> .d1 <position: absolute;<br> font-size: 1000%;<br> color: #ffccff;<br> top: 10%;<br> left: 10%;<br> width: 70%;><br> .d2 <position: absolute;<br> font-size: 450%;<br> color: #ccffff;<br> top: 150;<br> left: 20%;<br> width: 60%;><br> .d3 <position: absolute;<br> font-size: 100%;<br> color: navy;<br> top: 10%;<br> left: 25%;<br> width: 35%;><br> b <font-size: 100%; color: #0088bb><br> i <br> </style><br> </head><br> <body><br> <div class=»d1″>HTML</div><br> <div class=»d2″>Підручник</div><br> <div class=»d3″><br> <p>даний <b>підручник HTML</b> і <b>CSS</b> допоможе починаючому користувачеві, крок за кроком, від початку і до кінця створити свою власну сторінку в інтернеті, <b>WEB-вузол</b> або їх локальну версію на <b>CD</b>, а також може послужити <b>on-line</b> довідником для більш просунутих <i>користувачів</i>.<br> Не варто чекати від сайту абсолютно вичерпного обсягу інформації, проте<br> він буде <b>регулярно</b> оновлюватися і поповнюватися матеріалами.<br> </p><br> </div><br> </body><br> </html></p></div> <div class="extra"> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/sferi-suspilstva.html">сфери суспільства</a></li> <li><a href="/articles/jakshho-vi-dumaete-shho-vsesvit-sidit-i-pridumue.html">Якщо ви думаєте, що всесвіт сидить і придумує для вас проблеми і хвороби, то у вас манія</a></li> <li><a href="/articles/etiket-spilkuvannja-z-invalidami.html">Етикет спілкування з інвалідами</a></li> <li><a href="/articles/ekomama-jak-nevimusheno-buti-molodoju-mamoju-i-vse.html">Екомама - як невимушено бути молодою мамою і все встигати</a></li> <li><a href="/articles/roztashuvannja-run-v-dishonored-2.html">Розташування рун в dishonored 2</a></li> <li><a href="/articles/udar-z-pid-vodi-tiha-zagroza-zhurnal-populjarna.html">Удар з-під води тиха загроза, журнал популярна механіка</a></li> <li><a href="/articles/dikloberl-instrukcija-iz-zastosuvannja-i-cina.html">Диклоберл - інструкція із застосування і ціна</a></li> <li><a href="/articles/spin-off-serialu-jak-ja-zustriv-vashu-mamu-ne.html">Спін-офф серіалу - як я зустрів вашу маму - не вийде на телеекрани - мережеве видання М24 -</a></li> <li><a href="/articles/naturalni-harchovi-barvniki-neskladno-ekologichno.html">Натуральні харчові барвники - нескладно, екологічно і корисно</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/jak-vilikuvati-visip-na-golivci-statevogo-chlena.html">Як вилікувати висип на голівці статевого члена</a></li> <li><a href="/articles/jashhik-pandori-eduard-limoniv-smert-na-tureckih.html">Ящик Пандори - едуард лимонів смерть на турецьких курортах</a></li> <li><a href="/articles/borova-matka-pri-miomi-vidguki-likariv-i-pacientok.html">Борова матка при міомі відгуки лікарів і пацієнток</a></li> <li><a href="/articles/ljalki-vantazhu-i-antikvariat.html">Ляльки вантажу і антикваріат</a></li> <li><a href="/articles/konspekt-integrovanogo-zanjattja-v-starshij-grupi.html">Конспект інтегрованого заняття в старшій групі - в країні радості</a></li> <li><a href="/articles/chomu-vi-zavzhdi-povinni-proshhatisja-z-ditinoju.html">Чому ви завжди повинні прощатися з дитиною, коли йдете the jizn</a></li> <li><a href="/articles/jak-nanositi-ridki-shpaleri-na-gipsokarton-legko-i.html">Як наносити рідкі шпалери на гіпсокартон - легко і просто</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>Copyright © 2026</p> <ul> <li><a href="/articles/abscisa-ce.html">Абсциса - це</a></li> <li><a href="/articles/sadova-mebli-4-seasons-outdoor-gollandija.html">Садова меблі 4 seasons outdoor Голландія</a></li> <li><a href="/articles/ogljad-fotoredaktoriv-dlja-android-vibiraemo.html">Огляд фоторедакторів для android - вибираємо кращий</a></li> <li><a href="/articles/shho-mi-znaemo-pro-pocilunki.html">Що ми знаємо про поцілунки</a></li> <li><a href="/articles/kafedra-mikrobiologii-virusologii-ta-imunologii.html">Кафедра мікробіології, вірусології та імунології УМКД, стоматологія</a></li> </ul> </div> </footer></div> <style> #cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden} </style> <div id="cookieNoticeOverlay"> <div id="cookieNoticeBox" role="dialog" aria-modal="true"> <h2>Cookie на сайті</h2> <p>Ми використовуємо cookie для коректної роботи сайту та покращення сервісу.</p> </div> </div> <script> (function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}} function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}} if(getAcceptedUntil()>now){return} var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return} function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')} function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')} okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return} var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})() </script></body> </html>
