Функционирование button под z-index`ом селектора класса

Question

Самообучаюсь html/css, хотелось бы спросить у вас: каким образом возможно перекрыть классом .chat всю заданную область .slider, но в то же время сохранить в рабочем состоянии элементы под ним? К примеру класс .button1.

* {
  box-sizing: border-box;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background: #ccccff;
}

.slider {
  width: 340px;
  min-height: 580px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  padding-bottom: 30px;
  background: #f7f6ee;
}

.slide {
  position: absolute;
  opacity: 0;
  transition: all 0.4s ease-in;
}

input[type="radio"],
input[type="checkbox"] {
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  border: 0;
  padding: 0;
  margin: -1px;
}

.slider>label {
  margin: 0 0 0 120px;
  width: 20px;
  height: 5px;
  border-radius: 5px;
  background: #4b3730;
  position: absolute;
  bottom: 22px;
  transition: all .4s ease;
  z-index: 2;
  cursor: pointer;
}

label.second {
  left: 8%;
}

label.third {
  left: 16%;
}

label.fourth {
  left: 24%;
}

#first:checked~div.one {
  left: 0;
  opacity: 1;
}

#second:checked~div.two {
  left: 0;
  opacity: 1;
}

#third:checked~div.three {
  left: 0;
  opacity: 1;
}

#fourth:checked~div.four {
  left: 0;
  opacity: 1;
}

#commentbutton:checked~div.chat {
  left: 0;
  opacity: 1;
}

.slider>label:hover {
  background: orange;
  transform: scale(1);
}

span {
  position: relative;
  font-size: 500%;
  color: black;
}

.one h2 {
  position: absolute;
  top: 135px;
  left: 20px;
  font-weight: lighter;
  font-size: 15px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

.one h1 {
  position: absolute;
  color: white;
  top: 155px;
  left: 20px;
  text-shadow: 1px 1px 1px black;
}

.bot {
  position: absolute;
  bottom: 0px;
  width: 340px;
  height: 50px;
  background: white;
  z-index: 1;
}

#fourth:checked~label.fourth {
  background: orange;
  transform: scale(1.3);
}

#third:checked~label.third {
  background: orange;
  transform: scale(1.3);
}

#second:checked~label.second {
  background: orange;
  transform: scale(1.3);
}

#first:checked~label.first {
  background: orange;
  transform: scale(1.3);
}

.imgoneslide {
  width: 120%;
  object-fit: cover;
  float: left;
}

.two,
.three,
.four,
.chat {
  font-size: 15.4px;
  margin: 0px 30px 0px 30px;
  font-family: 'Sanchez', serif;
}

.button1,
.button2 {
  background: white;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  outline: 0;
  transition: 0.2s;
}

.button1 {
  position: absolute;
  top: 400px;
  left: 20px;
  width: 75px;
  height: 25px;
  z-index: 2;
}

.button2 {
  float: left;
  margin: 15px;
}

.button1:hover,
.commentbutton:hover {
  color: orange;
  background-color: #4b3730;
}

.button2:hover {
  color: orange;
  text-shadow: 0px 0px 1px black;
}

.button1:focus,
.button2:focus {
  color: orange;
  background-color: #4b3730;
}

.commentbutton {
  position: absolute;
  width: 25px;
  height: 111px;
  right: 20px;
}

.chat {
  background: white;
  margin: 0;
  width: 340px;
  min-height: 580px;
  z-index: 1;
}

.close {
  position: absolute;
  width: 25px;
  height: 20px;
  right: 20px;
  bottom: 15px;
  border: solid black;
  border-width: 1.5px;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Rajdhani&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Sanchez&display=swap" rel="stylesheet">
</head>

<body>

  <div class="slider">

    <input type="radio" name="nav" id="first" checked>
    <input type="radio" name="nav" id="second">
    <input type="radio" name="nav" id="third">
    <input type="radio" name="nav" id="fourth">
    <input type="checkbox" id="commentbutton">

    <label for="first" class="first"></label>
    <label for="second" class="second"></label>
    <label for="third" class="third"></label>
    <label for="fourth" class="fourth"></label>
    <label for="commentbutton" class="commentbutton"></label>

    <div class="one slide">
      <img src="https://images.unsplash.com/photo-1556025422-9e27232ddbbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="imgoneslide">
      <h1>
        THE <br> DARK SIDE<br> OF THE<br> DIGITAL
        <br> NOMAD
      </h1>
      <h2>MARK MANSON</h2>
      <button type="button" class="button1">TRAVEL</button>
    </div>
    <div class="two slide">
      <p>
        <span>T</span>he following is the original piece I wrote for CNN last year about location independent entrepreneurs, also known as “digital nomads.” Since the whole “Work Online, Travel the World and Live the Dream” angle had been done to death
        in a million places, I decided to go the other direction and show the dark side of being a digital nomad — the challenges one faces, the emotional pitfalls, the social sacrifices.</p>

      <p>Predictably, CNN hated it. The editors hacked it to pieces and asked me to rewrite sections to make it less gloomy. And since they’re CNN and I’m just an asshole with a book about smut, I said OK. But I was always fond of the original, so I’m posting
        it here unabridged.</p>
    </div>
    <div class="three slide">
      <p>
        <span>A</span>lso note: the people and events in the piece are actually composites and mash-ups of my real life experiences and relationships. I did that for the sake of narrative and space. Enjoy.</p>

      <p>It’s 12:20PM on a Friday afternoon when most of them shuffle into the hotel conference room. The schedule said 11AM. Wishful thinking.</p>

      <p>Floor-to-ceiling windows look out over a rooftop lagoon with the sunny reflective skyline of Bangkok draped behind, 19 floors up.</p>

      <p>The people’s feet are adorned with flip-flops and Converse sneakers, some of their bodies in button-downs and blazers, others in cargo shorts and tank tops.</p>
    </div>
    <div class="four slide">
      <p>
        <span>T</span>hey are mostly men, single, in their 20’s and 30’s. But as with every group, there are the exceptions. Eventually 44 of them will fill the full-windowed conference room, bathed in natural light, sipping Singha beer and thirty-cent
        Red Bulls, listening to ad hoc presentations about outsourcing, systems management, dropshipping, grey-hat SEO, and other esoteric topics.</p>

      <p>Unless someone told you, you would never guess that this was a conference for successful internet entrepreneurs and business owners from around the world, that the median income of the scraggly-faced, wrinkle-shirted crowd is likely well into the
        six-figures.
      </p>
      ...

    </div>
    <div class="chat slide">
    </div>
    <div class="bot">
      <button type="button" class="button2">CLOSE</button>
    </div>
  </div>
</body>

Answer 1

Если указать pointer-events: none; элемент сможет пропустиь через себя события мышки, а элементы под ним смогут их поймать.

https://stackoverflow.com/questions/1009753/pass-mouse-events-through-absolutely-positioned-element

https://css-tricks.com/almanac/properties/p/pointer-events/

Поддержка браузерами отличная:

https://caniuse.com/#feat=pointer-events

P.S. А перекрыть можно абсолютным позиционированием.

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

Для родителя конечно нужно указать position: relative.

Answer 2

* {
  box-sizing: border-box;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background: #ccccff;
}

.container {
  position: relative;
  width: 340px;
  min-height: 580px;
}

.slider {
  width: 340px;
  min-height: 580px;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  padding-bottom: 30px;
  background: #f7f6ee;
}

.slide {
  position: absolute;
  opacity: 0;
  transition: all 0.4s ease-in;
}

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

.slider>label {
  margin: 0 0 0 120px;
  width: 20px;
  height: 5px;
  border-radius: 5px;
  background: #4b3730;
  position: absolute;
  bottom: 22px;
  transition: all .4s ease;
  z-index: 2;
  cursor: pointer;
}

label.second {
  left: 8%;
}

label.third {
  left: 16%;
}

label.fourth {
  left: 24%;
}

#first:checked~div.one {
  left: 0;
  opacity: 1;
}

#second:checked~div.two {
  left: 0;
  opacity: 1;
}

#third:checked~div.three {
  left: 0;
  opacity: 1;
}

#fourth:checked~div.four {
  left: 0;
  opacity: 1;
}

#commentbutton:checked~div.chat {
  left: 0;
  opacity: 1;
}

#commentbutton:checked~div.one button {
  display: none;
}

.slider>label:hover {
  background: orange;
  transform: scale(1);
}

span {
  position: relative;
  font-size: 500%;
  color: black;
}

.one h2 {
  position: absolute;
  top: 135px;
  left: 20px;
  font-weight: lighter;
  font-size: 15px;
  color: white;
  text-shadow: 1px 1px 1px black;
}

.one h1 {
  position: absolute;
  color: white;
  top: 155px;
  left: 20px;
  text-shadow: 1px 1px 1px black;
}

.bot {
  position: absolute;
  bottom: 0px;
  width: 340px;
  height: 50px;
  background: white;
  z-index: 1;
}

#fourth:checked~label.fourth {
  background: orange;
  transform: scale(1.3);
}

#third:checked~label.third {
  background: orange;
  transform: scale(1.3);
}

#second:checked~label.second {
  background: orange;
  transform: scale(1.3);
}

#first:checked~label.first {
  background: orange;
  transform: scale(1.3);
}

.imgoneslide {
  width: 120%;
  object-fit: cover;
  float: left;
}

.two,
.three,
.four {
  font-size: 15.4px;
  margin: 0px 30px 0px 30px;
  font-family: 'Sanchez', serif;
}

.button1,
.button2 {
  background: white;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  outline: 0;
  transition: 0.2s;
}

.button1 {
  z-index: 1;
  position: absolute;
  top: 400px;
  left: 20px;
  width: 75px;
  height: 25px;
}

.button2 {
  float: left;
  margin: 15px;
}

.button1:hover,
.button2:hover {
  color: orange;
  background-color: #4b3730;
}

.commentbutton {
  position: absolute;
  width: 25px;
  height: 111px;
  right: 20px;
}

.chat {
  background: white;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
}

.close {
  position: absolute;
  width: 25px;
  height: 20px;
  right: 20px;
  bottom: 15px;
  border: solid black;
  border-width: 1.5px;
}

.end {
  position: absolute;
  right: 5px;
  top: 20px;
  width: 28px;
  height: 28px;
}

.end:before,
.end:after {
  position: absolute;
  content: " ";
  height: 18px;
  width: 2px;
  background-color: #333;
}

.end:before {
  transform: rotate(45deg);
}

.end:after {
  transform: rotate(-45deg);
}

.end:hover:before,
.end:hover:after {
  background-color: orange;
}

<div class="slider">

  <input type="radio" name="nav" id="first" checked>
  <input type="radio" name="nav" id="second">
  <input type="radio" name="nav" id="third">
  <input type="radio" name="nav" id="fourth">
  <input type="checkbox" id="commentbutton">

  <label for="first" class="first"></label>
  <label for="second" class="second"></label>
  <label for="third" class="third"></label>
  <label for="fourth" class="fourth"></label>
  <label for="commentbutton" class="commentbutton"></label>

  <div class="one slide">
    <img src="https://images.unsplash.com/photo-1556025422-9e27232ddbbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" class="imgoneslide">
    <h1>
      THE <br> DARK SIDE<br> OF THE<br> DIGITAL
      <br> NOMAD
    </h1>
    <h2>MARK MANSON</h2>
    <button type="button" class="button1">TRAVEL</button>
  </div>
  <div class="two slide">
    <p>
      <span>T</span>he following is the original piece I wrote for CNN last year about location independent entrepreneurs, also known as “digital nomads.” Since the whole “Work Online, Travel the World and Live the Dream” angle had been done to death
      in a million places, I decided to go the other direction and show the dark side of being a digital nomad — the challenges one faces, the emotional pitfalls, the social sacrifices.</p>

    <p>Predictably, CNN hated it. The editors hacked it to pieces and asked me to rewrite sections to make it less gloomy. And since they’re CNN and I’m just an asshole with a book about smut, I said OK. But I was always fond of the original, so I’m posting
      it here unabridged.</p>
  </div>
  <div class="three slide">
    <p>
      <span>A</span>lso note: the people and events in the piece are actually composites and mash-ups of my real life experiences and relationships. I did that for the sake of narrative and space. Enjoy.</p>

    <p>It’s 12:20PM on a Friday afternoon when most of them shuffle into the hotel conference room. The schedule said 11AM. Wishful thinking.</p>

    <p>Floor-to-ceiling windows look out over a rooftop lagoon with the sunny reflective skyline of Bangkok draped behind, 19 floors up.</p>

    <p>The people’s feet are adorned with flip-flops and Converse sneakers, some of their bodies in button-downs and blazers, others in cargo shorts and tank tops.</p>
  </div>
  <div class="four slide">
    <p>
      <span>T</span>hey are mostly men, single, in their 20’s and 30’s. But as with every group, there are the exceptions. Eventually 44 of them will fill the full-windowed conference room, bathed in natural light, sipping Singha beer and thirty-cent
      Red Bulls, listening to ad hoc presentations about outsourcing, systems management, dropshipping, grey-hat SEO, and other esoteric topics.</p>

    <p>Unless someone told you, you would never guess that this was a conference for successful internet entrepreneurs and business owners from around the world, that the median income of the scraggly-faced, wrinkle-shirted crowd is likely well into the
      six-figures.
    </p>
    ...
  </div>



  <div class="chat slide">
    <label for="commentbutton" class="end"></label>
  </div>
  <div class="bot">
    <button type="button" class="button2">CLOSE</button>
  </div>

</div>

Answer 3

Для того чтобы к кнопке применился эффект от transition необходимо display: none заменить на opacity: 0 + добавить pointer-events: none (который посоветовал пользователь Roman. Спасибо ему), а также transition (для плавного перехода).

БЛОГ НА HUSL

Функционирование button под z-index`ом селектора класса

Ответы (3 шт):