lucrativeperson

Чтобы преобразовать строку в число

+"76" == Number("76")

Решилась проблема так
Если кому то это поможет как и мне, нужно писать вот так
npx json-server db.json

Можно и не создавать, но будет неудобно. Особенно если вы привыкли коммитить всё без разбору, а не только нужные файлы. Файлы игноров уменьшают вероятность закоммитить мусор.

А вы попробуйте его не создать и закомитить, например нод модули или что-то типа такого. Да, нужно, чтоб не комитить то, что туда попадать не должно.

Попробую расписать о том как работает z-index.

К примеру есть 2 дива c разным z-index, по умолчанию у них нет контекста стекирования потому что по умолчанию у них position: static; - а это позиционирование не создаёт контекст для z-index, и не важно сколько бы был z-index у .gg, нижний блок всегда будет его перекрывать, а если бы у них бы был контекст и одинаковый z-index то перекрывал бы нижний в иерархии html элемент

<div class="gg"></div>
<div class="tt"></div>

а вот и стили к ним

.gg{
  z-index: 999;
  width: 100px;
  height: 100px;
  background: red;
}

.tt{
  z-index: 2;
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
}

Из документации сказано в каких случаях создаётся контекст стекирования
1 - является корневым элементом (то есть HTML)
2 - позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto"
3 - flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex или display: inline-flex;
4 - display: inline-flex;
5 - элементы с opacity меньше чем 1
6 - элементы с transform отличным от "none"
7 - элементы с mix-blend-mode значением отличным от "normal"
8 - элементы с filter значением отличным от "none"
9 - элементы с isolation установленным в "isolate"
10 - position: fixed;
11 - если мы указываем элементу атрибут will-change при этом не обязательно присваивать ему значения
12 - элементы с -webkit-overflow-scrolling (en-US) установленным в "touch"
13 - grid элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: grid

Если нужно что бы .gg - перекрывал нижний по иерархии html элемент, мы можем задать для .gg - один из перечисленных вариантов, например display: inline-flex; или position: relative; или же задать например родителю этих двух блоков display: flex; flex-direction: column; ( и блоки .gg .tt раз они станут флекс элементами то и z-index будет работать между ними, несмотря на то какой из них ниже а какой выше в иерархии html )

----------------------------------------------------------------------------------------------- -------------------------

Следующий пример который как раз таки возможно даст тебе понять о том как работает наконец таки z-index у детей.

Добавим потомка для дива с классом gg в данном случае это див с классом gg__children

<div class="gg">
  <div class="gg__children"></div> // потомок
</div>
<div class="tt"></div>

а вот и стили

.gg{
  width: 100px;
  height: 100px;
  background: red;
  z-index: 999;
}

.gg__children{
  width: 50px;
  height: 200px;
  background: green;
  z-index: 100;
}

.tt{
  width: 100px;
  height: 100px;
  background: blue;
  margin-top: -50px;
  z-index: 2;
}

так вот сколько угодно можно задавать потомку z-index , он всё равно выше z-index родителя прыгнуть не сможет,
а раз его родитель .gg - не имеет свой контекст и раз он находится выше в иерархии html то и соответственно .tt перекроет их всех

Советую как можно проще его использовать но зная основные принципы , или изучать от А до Я и проникнуть в саму суть его работы.

Документация

как можно исправить эту проблему??

Ровно так, как написано в тексте ошибки: Не использовать "&" на верхнем уровне.

UPD

main.scss

@mixin example() {
  &::hover { color: red; } // Так можно
  // но миксин можно использовать только внутри родительского селектора
}

&::hover { color: red; } // Так нельзя, нет родителя

.block {
  &::hover { color: red; } // Так можно, есть родительский селектор (.block)
}

@include example(); // Так нельзя, внутри обращение к родителю, а его нет

.block {
  @include example(); // Так можно
}