Flexbox + z-index

373

01 августа 2017, 16:53

Есть зелёный бокс-родитель с настройками:

display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;

В нём находятся 7 зелёных radio с плавающими/летающими размерами, называйте как хотите (14% от ширины родительского).

Нужно добавить по верх них ещё пару штук radio которые будут накладываться на них сверху с размерами (7% от ширины родительского и 2/3 высоты от зелёных) при этом, чтобы не смещались зелёные. Варианты с точными размерами не предлагать, только относительные в %.

<div class="octave-box">
  <div class="white-note"></div>
  <div class="black-note"></div>
  <div class="white-note"></div>
  <div class="black-note"></div>
  <div class="white-note"></div>
  <div class="white-note"></div>
  <div class="black-note"></div>
  <div class="white-note"></div>
  <div class="black-note"></div>
  <div class="white-note"></div>
  <div class="black-note"></div>
  <div class="white-note"></div>
</div>

!При этом чтобы между чёрными был пробел, и если на него кликнуть - работал нижний зелёный.

Вот LESS код:

.octave-box{
    .bgcl_cl(@red, @white);
    .bd_color(@grey);
    .margin_ALL;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    min-width: 30%;
    max-width: 30%;
    min-height: 98%;
    max-height: 98%;
}

Answer 1

div { 
  display: flex; 
  height: 10em; 
  border: 1px solid red; 
  position: relative; 
} 
 
label { 
  background: green; 
  flex: 1 0 0px; 
} 
 
input { 
  display: block; 
  height: 100%; 
  margin: auto; 
} 
 
.over { 
  flex: 0 0 0px; 
} 
 
.over span { 
  background: black; 
  position: absolute; 
  height: 66.667%; 
  width: 9%; 
  transform: translate(-50%); 
} 
 
label:hover, label:hover span { 
  background: silver; 
}

<div> 
  <label><input type=radio name=rbtn></label> 
  <label class=over><span><input type=radio name=rbtn></span></label> 
  <label><input type=radio name=rbtn></label> 
  <label class=over><span><input type=radio name=rbtn></span></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
</div>

Ещё можно вспомнить о свойстве order:

div { 
  display: flex; 
  height: 10em; 
  border: 1px solid red; 
  position: relative; 
} 
 
label { 
  background: green; 
  flex: 1 0 0px; 
} 
 
input { 
  display: block; 
  height: 100%; 
  margin: auto; 
} 
 
.over { 
  flex: 0 0 0px; 
} 
 
.over span { 
  background: black; 
  position: absolute; 
  height: 66.667%; 
  width: 9%; 
  transform: translate(-50%); 
} 
 
label:hover, label:hover span { 
  background: silver; 
}

<div> 
  <label style=order:1><input type=radio name=rbtn></label> 
  <label style=order:2><input type=radio name=rbtn></label> 
  <label style=order:3><input type=radio name=rbtn></label> 
  <label style=order:4><input type=radio name=rbtn></label> 
  <label style=order:5><input type=radio name=rbtn></label> 
  <label style=order:6><input type=radio name=rbtn></label> 
  <label style=order:7><input type=radio name=rbtn></label> 
  <label class=over style=order:1><span><input type=radio name=rbtn></span></label> 
  <label class=over style=order:2><span><input type=radio name=rbtn></span></label> 
</div>

Answer 2

Пианино:

body { 
  position: relative; 
} 
 
div { 
  display: flex; 
  height: 10em; 
  width: 100%; 
  border: 1px solid red; 
  box-sizing: border-box; 
} 
 
label { 
  background: green; 
  flex: 1 0 0px; 
} 
 
input { 
  display: block; 
  height: 100%; 
  margin: auto; 
} 
 
.main { 
  position: absolute; 
} 
 
.over { 
  pointer-events: none; 
  padding: 0 7.143%; 
  position: relative; 
} 
 
.over label { 
  pointer-events: all; 
  background: black; 
  height: 66.667%; 
  margin: 0 3% auto; 
} 
 
label:hover { 
  background: silver; 
}

[[[ Основной поток ]]] 
<div class=main> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
</div> 
<div class=over> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
</div> 
[[[ Основной поток ]]]

Answer 3

div { 
  display: flex; 
  border: 1px solid red; 
  height: 10em; 
  flex-wrap: wrap; 
} 
 
label { 
  background: green; 
  flex: 2 0 0px; 
  height: 100%; 
  order: -1; 
} 
 
input { 
  display: block; 
  height: 100%; 
  margin: auto; 
} 
 
.splitter { 
  flex: 0 0 100%; 
  order: -1; 
} 
 
.splitter ~ label { 
  height: 66.667%; 
  margin: auto 3% 0; 
  background: black; 
  order: 1; 
  transform: translateY(-150%); 
} 
 
.splitter + label { 
  margin-left: 10%; 
} 
 
label:last-child { 
  margin-right: 10%; 
} 
 
label:hover { 
  background: silver; 
}

[[[ Основной поток ]]] 
<div> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
 
  <span class=splitter></span> 
 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
  <label><input type=radio name=rbtn></label> 
</div> 
[[[ Основной поток ]]]