У меня есть простенький слайдер. В первом случае, я использую position: absolute
, во втором – position: relative
.
1. POSITION:ABSOLUTE – работает
* {
margin: 0;
padding: 0;
text-align: center;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.block_1, .block_2, .block_3 {
display: flex;
position: absolute;
z-index: 0;
opacity: 0;
transition: .5s;
}
.block {
width: 200px;
height: 200px;
margin: 5px;
}
.block_1 > .block {
background: red;
}
.block_2 > .block {
background: orange;
}
.block_3 > .block {
background: yellow;
}
.blocks-wrapper {
width: 630px;
height: 210px;
overflow: hidden;
}
#one:checked ~ .blocks-wrapper > .block_1 {
opacity: 1;
z-index: 1;
}
#two:checked ~ .blocks-wrapper > .block_2 {
opacity: 1;
z-index: 1;
}
#three:checked ~ .blocks-wrapper > .block_3 {
opacity: 1;
z-index: 1;
}
<div class="all-wrapper">
<input checked type="radio" id="one" name="blocks">
<input type="radio" id="two" name="blocks">
<input type="radio" id="three" name="blocks">
<div class="blocks-wrapper">
<div class="block_1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="block_2">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="block_3">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
2. POSITION:RELATIVE – не работает
* {
margin: 0;
padding: 0;
text-align: center;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.block_1, .block_2, .block_3 {
display: flex;
position: relative;
z-index: 0;
opacity: 0;
transition: .5s;
}
.block {
width: 200px;
height: 200px;
margin: 5px;
}
.block_1 > .block {
background: red;
}
.block_2 > .block {
background: orange;
}
.block_3 > .block {
background: yellow;
}
.blocks-wrapper {
width: 630px;
height: 210px;
overflow: hidden;
}
#one:checked ~ .blocks-wrapper > .block_1 {
opacity: 1;
z-index: 1;
}
#two:checked ~ .blocks-wrapper > .block_2 {
opacity: 1;
z-index: 1;
}
#three:checked ~ .blocks-wrapper > .block_3 {
opacity: 1;
z-index: 1;
}
<div class="all-wrapper">
<input checked type="radio" id="one" name="blocks">
<input type="radio" id="two" name="blocks">
<input type="radio" id="three" name="blocks">
<div class="blocks-wrapper">
<div class="block_1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="block_2">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
<div class="block_3">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
Почему?