andb.online

CSS: Position, Styling & Components

Properties2
descriptionПозиционирование, стилизация и компоненты в CSS
tagsinterview, frontend, css, position, styling, components

3 min read

CSS: Position, Styling & Components

Свойство position

position определяет способ позиционирования элемента в документе.

/* static — по умолчанию, в потоке документа */
.box { position: static; }
 
/* relative — смещается относительно своего места, место в потоке сохраняется */
.box { position: relative; top: 10px; left: 20px; }
 
/* absolute — выпадает из потока, позиционируется относительно
   ближайшего предка с position != static */
.parent { position: relative; }
.child  { position: absolute; top: 0; right: 0; }
 
/* fixed — относительно viewport, не скроллится вместе со страницей */
.header { position: fixed; top: 0; width: 100%; z-index: 100; }
 
/* sticky — как relative, пока не достигнет порога прокрутки — затем как fixed */
.nav { position: sticky; top: 0; }
ЗначениеВ потокеОтносительноСкроллится
static✅—✅
relative✅Себя✅
absolute❌Ближайший предок с position✅
fixed❌Viewport❌
sticky✅Ближайший скроллящийся контейнерчастично

absolute без позиционированного предка позиционируется относительно initial containing block (блок размером с viewport), а не элемента <html>.

Как стилизовать кастомный чекбокс?

Нативный <input type="checkbox"> плохо поддаётся стилизации. Решение — скрыть его и нарисовать свой визуальный элемент.

<label class="checkbox">
  <input type="checkbox" class="checkbox__input" />
  <span class="checkbox__box"></span>
  Согласен с условиями
</label>
/* Скрываем нативный чекбокс, но оставляем доступным */
.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
 
/* Кастомный квадратик */
.checkbox__box {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 3px;
  background: white;
  transition: background 0.2s, border-color 0.2s;
  vertical-align: middle;
}
 
/* Состояние checked — через соседний селектор */
.checkbox__input:checked + .checkbox__box {
  background: #4f46e5;
  border-color: #4f46e5;
}
 
/* Галочка через ::after */
.checkbox__input:checked + .checkbox__box::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(2px, -1px);
  margin: 1px auto 0;
}
 
/* Фокус для accessibility */
.checkbox__input:focus-visible + .checkbox__box {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
}

Альтернатива через appearance: none (напрямую стилизуем <input>):

input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 3px;
  cursor: pointer;
}
 
input[type="checkbox"]:checked {
  background: #4f46e5;
  border-color: #4f46e5;
}

appearance: none — современный подход, поддерживается во всех актуальных браузерах. Метод со скрытым <input> и <span> надёжнее для сложных дизайнов.

Подходы к стилизации в React

CSS-модули:

import styles from './Button.module.css';
<button className={styles.button}>Click</button>
// Генерирует уникальный класс: Button_button__xK2p1
  • ✅ Нет конфликтов имён; ✅ обычный CSS; ❌ нет динамических стилей

Styled Components:

const Button = styled.button`
  background: ${props => props.$primary ? 'blue' : 'white'};
  padding: 8px 16px;
`;
  • ✅ Динамические стили через пропсы; ❌ дополнительная зависимость

Tailwind CSS:

<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click
</button>
  • ✅ Быстрая вёрстка; ✅ минимальный CSS; ❌ громоздкий JSX
ПодходКонфликтыДинамикаРазмер bundle
CSS-модули❌ нет❌ нетМинимальный
Styled Components❌ нет✅ естьСредний
Tailwind CSS❌ нет⚠️ через cn()Минимальный

Graph View

Backlinks