Как я могу исправить наложение текста на навигационную панель? ⇐ CSS

[Anonymous]

Если вы прокрутите вниз до вафель, я использовал специальные флажки. мне удалось разместить флажки под панелью навигации при прокрутке, но текст все равно будет отображаться поверх панели навигации.codepen
Я использую z-index, но когда я использую z-index: -1 в своем классе меток, мои кнопки недоступны для нажатия.

Код: Выделить всё

 Whipped Cream -  $0.75 [/b][b]

 Chocolate Drizzle -  $0.25 [/b][b]

 Peanut Butter -  $0.25 [/b][b]

 Honey -  $0.25 [/b][b]

 Jelly -  $0.25 [/b][b]

 Strawberries -  $0.50 per scoop [/b][b]

 Blueberries -  $0.50 per scoop [/b][b]

 Raspberries-  $0.50 per scoop [/b][b]

 Blackberries -  $0.50 per scoop [/b][b]

 Bananas -  $0.50 per scoop [/b][b]

 Peaches -  $0.50 per scoop[/b][b]

 Chopped Walnuts -  $0.50 per scoop[/b][b]


 Chopped Pecans -  $0.50 per scoop[/b][b]

 Powdered Sugar -   $0.25 [/b][b]

Код: Выделить всё

input[type="checkbox"] {
display: none;
}

label {
display: inline-block;
cursor: pointer;
position: absolute;
padding-left: 25px;
margin-right: 15px;
}

label:before {
background-color: #d74b76;
content: "";
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 0;
bottom: 1px;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3),
0px 1px 0px 0px rgba(255, 255, 255, 0.8);
z-index: -1;
}
.checkbox label:before {
border-radius: 3px;
}

input[type="checkbox"]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
font-size: 12px;
color: #fff;
text-align: center;
line-height: 12px;
}

Код: Выделить всё

input[type="checkbox"] {
display: none;
}

label {
display: inline-block;
cursor: pointer;
position: absolute;
padding-left: 25px;
margin-right: 15px;
}

label:before {
background-color: #d74b76;
content: "";
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
left: 0;
bottom: 1px;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, 0.3),
0px 1px 0px 0px rgba(255, 255, 255, 0.8);
z-index: -1;
}
.checkbox label:before {
border-radius: 3px;
}

input[type="checkbox"]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
font-size: 12px;
color: #fff;
text-align: center;
line-height: 12px;
}

Код: Выделить всё

 Whipped Cream -  $0.75 [/b][b]

 Chocolate Drizzle -  $0.25 [/b][b]

 Peanut Butter -  $0.25 [/b][b]

 Honey -  $0.25 [/b][b]

 Jelly -  $0.25 [/b][b]

 Strawberries -  $0.50 per scoop [/b][b]

 Blueberries -  $0.50 per scoop [/b][b]

 Raspberries-  $0.50 per scoop [/b][b]

 Blackberries -  $0.50 per scoop [/b][b]

 Bananas -  $0.50 per scoop [/b][b]

 Peaches -  $0.50 per scoop[/b][b]

 Chopped Walnuts -  $0.50 per scoop[/b][b]


 Chopped Pecans -  $0.50 per scoop[/b][b]

 Powdered Sugar -   $0.25 [/b]


Add to Cart

этот фрагмент кода представляет собой всего лишь флажки, вы увидите проблему на код

Подробнее здесь: https://stackoverflow.com/questions/782 ... my-nav-bar