input'y nie działają

Question

Cześć, mam taki problem, że robię stronę, ale żaden input nie reaguje na kliknięcie. Mało tego, nawet hiperłącza nie działają

 

Link do całego kodu: https://codepen.io/Nearr2020/pen/OJpBxwx

Answer 1

Opacity daje przeźroczystość, ale nie tworzy kontekstu nakładania. Musisz jeszcze określić ten kontekst korzystając z właściwości z-index

...
.tabs .skins-content .content {
  position: absolute;
  z-index: -1;
}

.tabs .skins-content .active {
  letter-spacing: 0;
  z-index: 1;
}
...
.logout-bg-active {
  visibility: visible;
  z-index:3;
  opacity: 1;
}
...

 

Comments

Rzeczywiście, nie zwróciłem na to uwagi. Dziękuję za pomoc :)

---

też całość działa w przypadku kiedy usuniemy właściwość 

Wystarczy usunąc 

.tabs .skins-content .content {
  position: absolute; // do usuniecia 
  opacity: 0;
}
 

i wtedy już działa  

---

Również działa, dziękuję za poświęcony czas ;)

Answer 2

tylko na chwilę spojrzałem, ale problem leży w zagnieżdżeniu :) 

usunięcie np jednego diva np. 

 <div class="tabs">

zostawiając to co wewnątrz, powoduje już że wszystko działa. 
Dlatego podejrzewam że gdzieś po drodze w kodzie, jest coś niezamknięte, lub źle "zagnieżdżone" stad brak reakcji 

Comments

problem w tym, że gdy usunę "tabs" to cała struktura się psuje

---

<div class="content active">

ten div stanowi problem, jeśli np zapiszesz go pod nazwą <div class="contents"> lub  <div class="contents active">

to działanie jest prawidłowe. Prawdopodobnie "albo coś w css- nadajesz na klasę content, albo manipulujesz niepoprawnie js. Podejrzewam

Tutaj znalazłem błąd 

.tabs .skins-content .content {
  position: absolute; // wystarczy to usunąć 
  opacity: 0;
}

bez tych właściwości działa
Dodaje jeszcze informacje o potencjalnym problemie https://stackoverflow.com/questions/36938742/touchablehighlight-not-clickable-if-position-absolute

Answer 3

Tu jest jeszcze błąd

<span class="upload-skin-btn">Upload skin to public gallery</label>

...

            <div class="checkbox">
              <input type="checkbox" id="toggle2" class="toggle2 toggle" />
              <span class="upload-skin-btn">Upload skin to public gallery</label>
            </div>


...