🇺🇦 Позіціонування елементу з використанням position-anchor та position-name. Баги та проблеми

🇺🇦 Позіціонування елементу з використанням position-anchor та position-name. Баги та проблеми Зроби цей світ краще 👇 👇 👇 🇺🇦 Фонд Притули - https://prytulafoundation.org/ 🇺🇦 Стерненко - https://www.youtube.com/@STERNENKO 👻 На розвиток каналу Frontend Shinobi БАНКА - https://send.monobank.ua/jar/5tEodxQoEu Крипта - USDT 0x284eF2F4db8B27905d68bBBECBC95a119259A395 Приклад https://codepen.io/bookamba/pen/OPLbwMg Посиланнячка на подумати https://www.youtube.com/watch?v=4p-nUAb7ZWE https://developer.mozilla.org/en-US/docs/Web/CSS/position-try-fallbacks https://css-tricks.com/almanac/properties/p/position-try-fallbacks/ https://developer.mozilla.org/en-US/docs/Web/CSS/@position-try Гіт для кробраузерної підтримки https://github.com/oddbird/css-anchor-positioning Опис відео роліка: У відео розберемо простий приклад, як позіціанувати один елемент відного іншого за допомогою таких css властивостей як position-anchor та position-name та position-try і position-area а також поговоримо про баги які зараз ще не пофіксили, а саме позіціонування біля елемента що центрований як align-content: center а також чому position-try спрацьовує не корректно у випадку якщо спозіціанований елемент було зміщено за допомогою transform: translate 00:00 - Вступ 01:00 - Формуємо тестовий макет 03:14 - Вертикальне вирівнювання по центру без використання flex або grid 03:35 - Абсолютне позіціонування position-anchor та position-name 05:00 - Баг - чому елемент позіціанується не корректно 06:30 - вирігення проблеми з не корректним позіціануванням 07:20 - Альтернативні позиціі position-try та position-try-fallbacks 10:25 - Вирішення проблеми позіціонування альтернативних позицій 11:15 - Гітхаб для кросбраузерної підтримки #css #html #js #курсиCSS #урокиCSS #CSSПозиціонування, #positionAnchor, #positionName, #CSSБаги, #ВебРозробка, #CSSТрюки, #positionTry, #CSSВерстка, #ВирівнюванняЕлементів, #CSSТуторіал, #ПозиціонуванняCSS, #positionFallbacks, #КросбраузернаПідтримка, #Фронтенд, #ВебДизайн, #ВебПрограмування