селектор ~ подразумевает что в правиле "#cb3:checked ~ .three" #cb3 и .three находятся в одном родителе
<!DOCTYPE HTML>
<html>
<head>
<title>Lab5.7</title>
<style type="text/css">
.one {
text-align: center; font-size: 20px; background-color: Pink; color: DarkGreen; z-index: 2; height: 10em; width: 10em; position: absolute; bottom:500px; left: 400px;
}
.two {
text-align: center; font-size: 20px; background-color: PaleGreen; color: Blue; z-index: 3; height: 10em; width: 10em; position: absolute; bottom:500px; left: 700px;
}
.three {
text-align: center; font-size: 20px; background-color: LightYellow; color: Purple; z-index: 4; height: 10em; width: 10em; position: absolute; bottom:350px; left: 550px;
}
.four {
text-align: center; font-size: 20px; background-color: PowderBlue; color: Olive; z-index: 3; height: 10em; width: 10em; position: absolute; bottom:200px; left: 400px;
}
.five {
text-align: center; font-size: 20px; background-color: Lavender; color: Maroon; z-index: 2; height: 10em; width: 10em; position: absolute; bottom:200px; left: 700px;
}
#cb1:checked ~ .one{
z-index: 11;
}
#cb2:checked ~ .two{
z-index: 11;
}
#cb3:checked ~ .three{
z-index: 11;
}
#cb4:checked ~ .four{
z-index: 11;
}
#cb5:checked ~ .five{
z-index: 11;
}
</style>
</head>
<body>
<form>
<th align="right"><label for="cb1"> 1</label></th>
<input type="checkbox" name="rg1"id="cb1">
<th align="right"><label for="cb2"> 2</label></th>
<input type="checkbox" name="rg1"id="cb2">
<th align="right"><label for="cb3"> 3</label></th>
<input type="checkbox" name="rg1"id="cb3">
<th align="right"><label for="cb4"> 4</label></th>
<input type="checkbox" name="rg1"id="cb4">
<th align="right"><label for="cb5"> 5</label></th>
<input type="checkbox" name="rg1"id="cb5">
<th align="right"><input type="submit" value="Вибрати" id ="b1">
<input type="reset" value="Відмовитись" id ="b2">
<div class="one"> Блок1 </div>
<div class="two"> Блок2 </div>
<div class="three"> Блок3 </div>
<div class="four"> Блок4 </div>
<div class="five"> Блок5 </div>
</body>
</html>