CSS-стиль "обрабатывает" выше div без css absolute - PullRequest
Новая
       50

CSS-стиль "обрабатывает" выше div без css absolute

1 голос
/ 14 октября 2019

Я ввел «Календарь» div с «ручками» выше.

calendat with handles

Это создается с настройкой 2 div 3 * 3 px с чернымфон и размещение их в абсолютных позициях точно над вершиной календарного div внутри родительского div, который является относительным положением.

Этот календарь расположен в абсолютном месте над изображением.

Это работает, ноон чувствует себя очень «жестко закодированным», потому что каждое изменение в элементе календаря будет нарушать отображение, потому что «дескрипторы» будут находиться на одном месте, а верхняя граница календаря может двигаться.

Как я могу получить то же самоестиль «ручек» в верхней части самого календаря, поэтому изменения высоты CSS календаря не будут влиять на «ручки»?

1 Ответ

3 голосов
/ 14 октября 2019

Вы можете использовать псевдоэлемент примерно так - см. Рабочий пример ниже.

Элемент .cal::before представляет собой прямоугольник высотой 3 пикселя (height) с черными рамками 3 пикселя налевый и правый.

Это абсолютное положение от родительского элемента календаря на -6px на оси Y (top), поэтому оно проходит за верхнюю границу календаря и на 3px left и right границ календаря. 

.cal {
  border: 3px solid #000;
  display: inline-block;
  font-family: sans-serif;
  position: relative;
  text-align: center;
}

.cal span {
  /* day */
  display: block;
  font-size: 10px;
  padding: 3px 10px;
}

.cal b {
  /* date number */
  display: block;
  border-top: 3px solid #000;
  padding: 5px;
}

.cal::before {
  /* handles */
  content: '';
  position: absolute;
  height: 3px;
  top: -6px;
  border-left: 3px solid #000;
  border-right: 3px solid #000;
  left: 3px;
  right: 3px;
}
<div class="cal">
  <span>SUN</span>
  <b>3</b>
</div>

<br><br>

<div class="cal">
  <span>TALLER</span>
  <b>3</b>
  <b>4</b>
  <b>5</b>
</div>
...