Як розібратися в CSS

3582
  • Z-index в CSS — позиціонування по осі Z
  • Cursor — змінюємо зовнішній вигляд курсору миші
  • Здрастуйте, шановні читачі блогу . Сьогодні ми продовжимо тему позиціонування Html тегів за допомогою мови CSS в сучасній верстці сайтів. На черзі у нас правило z-index, яке дозволяє задавати порядок розташування тегів, для яких значення position відмінно від умолчательного (static).

    Як розібратися в CSS

    Перш, ніж починати знайомитися з матеріалом цієї статті, обов’язково пориньте в основи позиціонування елементів з допомогою position, інакше можуть виникнути проблеми з розумінням. Ну, а в кінці цій невеликій публікації я ще до купи наведу приклади використання досить простого CSS правила cursor, що може знадобитися для підвищення юзабіліті веб-сайтів з динамічними інтерфейсами.

    Z-index в CSS — позиціонування по осі Z

    Отже, для всіх елементів, які були насильно спозиционированы (для них ми спеціально прописали position зі значенням relative, absolute або fixed), у нас з’являється можливість управляти розташуванням цих елементів один щодо одного на осі Z. Ця вісь спрямована від екрану комп’ютера до вашим очам (або очам відвідувачів сайтів).

    Дві інші осі X і Y, що мають початкову точку відліку в правому верхньому куті екрану (для тих, хто пише зліва направо) або в лівому верхньому куті (для тих, хто пише набором — араби, наприклад). Природно, що точкою відліку на осі Z є нуль. Саме в ній і розташовуються всі статичні елементи Html коду (для яких значення position не прописано, а значить браузер інтерпретує його як static).

    Але тим не менше, серед всіх статичних елементів, що лежать на нульовій позначці осі Z, повинен існувати якийсь порядок відображення. І він існує, підкоряючись правилом — тег, що знаходиться нижче в коді документа (веб-сторінки), буде розташований ближче до нашим очам. Т. о. при наїзді кордонів статичних елементів один на одного, зверху буде розташований той, який прописаний в коді веб-сторінки нижче.

    А ось якщо у тега прописано значення для position — relative, absolute або fixed, то вони будуть автоматично розташовуватися вище (ближче до нашим очам) по відношенню до всіх статичним. Позиціонували як теги адже можна рухати за допомогою CSS правил Left, right, top і bottom, а значить вони повинні бути апріорі розташовані вище (ближче до нас) щодо всієї іншої статики на веб-сторінці.

    Т. о. все позиціонували як елементи на осі Z автоматично зсуваються вперед щодо всіх статичних. Стосовно ж один одного вони підкоряються тим же правилом — елемент знаходиться нижче коді веб-сторінки буде розташований ближче до нашим очам. Але становищем на осі Z у таких тегів (з position — relative, absolute або fixed) можна буде гратися по своєму розумінню з допомогою правила z-index.

    Для статичних ж тегів (з «position: static» використовуваним за замовчуванням) правило z-index працювати не буде. У цьому полягає його специфіка. За замовчуванням воно має значення Auto або теж саме, що нуль (дія якого ми докладно розглянули трохи вище):

    Як розібратися в CSSЯк розібратися в CSS

    Але також як значення z-index можна використовувати позитивні та негативні цифри.

    Давайте розглянемо його роботу на простому прикладі. Нехай у нас є один великий контейнер Div з текстом (контентом) і відносним позиціонуванням (position:relative), а всередині нього укладені два інших Div з фіксованим розміром і абсолютним позиціонуванням (position:absolute щодо лівого верхнього кута зовнішнього контейнера):

    текст або ж контент зовнішнього контейнера

    Як розібратися в CSSЯк розібратися в CSS

    Внутрішнім контейнерів я задав зрушення і фонові кольори для більшої наочності. Чому на осі Z ці елементи розташувалися саме в такому порядку? Очевидно, що підкоряючись умолчательному правилом — чим нижче тег в коді, тим ближче він до нашим очам. Ну, а тепер давайте застосуємо, нарешті, правило z-index і подивимося, що з цього вийде.

    За замовчуванням воно має значення нуль, тому прописавши для червоного блоку z-index:1, ми висунемо його на перший план:

    Як розібратися в CSSЯк розібратися в CSS

    Все досить просто і зрозуміло. Одиниця позначає число на осі Z (перший рівень після нуля). Якщо ми захочемо, щоб фіолетовий блок знову висунувся вперед червоного, то можна буде йому прописати z-index:2 і ми отримаємо картину, аналогічну тій, що відображена на першому скріншоті. Виходить, що вище всіх (ближче до нашим очам) буде розташовано той тег, у якого більше значення цього CSS правила.

    Якщо воно виявиться у спозиційованих елементів однаковим, то вище буде стояти той елемент, який у коді веб-сторінки знаходиться нижче. І як я вже згадував трохи вище, значення для нього може бути використано зі знаком мінус (від’ємним). Давайте пропишемо z-index:-1 для червоного блоку і подивимося що з цього вийде:

    Як розібратися в CSSЯк розібратися в CSS

    Думаю, що коментарі тут зайві. Таким чином z-index дозволяє переміщати елементи коду по осі Z, щоб він був видний або ж, навпаки, не видно. Але все це пишність буде працювати тільки для спозиционирванных тегів, а для статичних (з position: static) вже працювати не буде. Це треба пам’ятати й враховувати.

    Cursor — змінюємо зовнішній вигляд курсору миші

    Нам залишилося тільки розібрати ще більш просте в розумінні правило Cursor. В операційних системах передбачений цілий набір можливих зображень курсору миші (рука, різні стрілки і т. п. речі). Все це спрямовано на зручність роботи і розуміння того, що відбувається або що можна зробити з тими чи іншими складовими дизайну операційки.

    Т. к. браузер теж є частиною операційної системи, то всі ці види курсорів будуть з’являтися і при вашій роботі з веб-сторінками. За замовчуванням правила Cursor використовується значення Auto і в цьому випадку браузер сам вирішує, що показати.

    Наприклад, у тексті веб-сторінки буде показуватися звичний текстовий курсорчик, на порожніх місцях — стрілочка, а на посиланнях — рука або її аналог (як налаштоване у вашій операційці). Але з допомогою Cursor ви вільні для будь-якого тега прописати своє значення і при наведенні на нього курсору миші останній змінить свій вигляд на те, що ви поставите.

    Якщо спиратися на специфікацію CSS з кладовища стандартів всесвітньої павутини WWW, то значень у Cursor може бути дуже багато:

    Як розібратися в CSSЯк розібратися в CSS

    Як я вже говорив, за замовчуванням для нього використовується Auto. Ну, а всі інші значення для Cursor ви можете побачити на наведеному нижче прикладі (підводите курсор миші до різних рядках і дивіться як зміниться вигляд:

    • cursor: auto
    • default
    • pointer
    • crosshair
    • text
    • wait
    • help
    • move
    • e-resize
    • ne-resize
    • nw-resize;»
    • n-resize
    • se-resize
    • sw-resize
    • s-resize
    • w-resize
    • progress
    • ol-resize;»
    • not-allowed
    • row-resize
    • vertical-text
    • cursor: url (https:///image/cursor.cur), cursor_type
    • all-scroll
    • no-drop

    У нижній частині розташовані значення для Cursor, які в деяких браузерах можуть ігноруватися. Зазвичай проблеми виникають в Опері, рідше в Mozilla Firefox і браузерах на движку Webkit — Google Chrome, Яндекс браузері, а також Сафарі для Віндовс), ну і взагалі не виникає в Інтернет Експлорері.

    Природно, що види курсорів будуть залежати і від використовуваної вами теми ОС або ж наборів курсорів в ній. Варто окремо відзначити варіант, де ви самі можете вказати шлях до потрібної вам зображення, яке зазвичай має розширення .cur, а через кому потрібно буде вказати одне з звичайних значень, наприклад, так:

    url(https:///image/cursor.cur), crosshair;

    Є багато програм, які вміють малювати курсори. Але має сенс активно застосовувати CSS правило Cursor тільки тоді, коли у вас будуть на сайті якісь динамічні інтерфейси. На звичайних сторінках краще не зловживати їхньою різноманітністю, щоб не вводити користувача в прострацію.

    Удачі вам! До зустрічей на сторінках блогу