Почему z-index не работает на первом элементе моей диаграммы
Столкнулся с проблемой z-index"а на первом элеменьте
.container {
margin: 0 auto;
width: 300px;
height: 300px;
overflow: hidden;
border-radius: 50%;
position: relative;
}
.sector {
width: 50%;
height: 50%;
position: absolute;
left: 50%;
top: 0;
transform-origin: left bottom;
}
div.bouble{
display: inline-block;
width: 100%;
}
.containers:after {
content: '';
position: absolute;
width: 50%;
height: 50%;
background: #fff;
border-radius: 50%;
top: 25%;
left: 25%;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<div class="container">
<div class="sector" style="background: rgb(51, 102, 204); z-index: 0; transform: rotate(0deg) skewY(180deg);">
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 5px;">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px;">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px;">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 25px;">
</div>
</div>
<div class="sector" style="background: rgb(220, 57, 19); z-index: 0; transform: rotate(90deg) skewY(149.76deg);">
<div class="bouble">
<input type="radio" style="position: relative;background: white;float: left;width: 10px;right: 10px;height: 10px;border-radius: 100%;z-index: 100;margin-top: 5px;transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative;background: white;float: left;width: 10px;right: 10px;height: 10px;border-radius: 100%;z-index: 100;margin-top: 30px;transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative;background: white;float: left;width: 10px;right: 10px;height: 10px;border-radius: 100%;z-index: 100;margin-top: 30px;transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative;background: white;float: left;width: 10px;right: 10px;height: 10px;border-radius: 100%;z-index: 100;margin-top: 25px;transform: skew(0deg, 30deg);">
</div>
</div>
<div class="sector" style="background: rgb(255, 153, 0); z-index: 0; transform: rotate(149.76deg) skewY(150.12deg);">
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 5px; transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px; transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px; transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 25px; transform: skew(0deg, 30deg);">
</div>
</div>
<div class="sector" style="background: rgb(17, 150, 24); z-index: 0; transform: rotate(209.88deg) skewY(150.12deg);">
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 5px; transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px; transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px; transform: skew(0deg, 30deg);">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 25px; transform: skew(0deg, 30deg);">
</div>
</div>
<div class="sector" style="background: rgb(153, 1, 153); z-index: 0; transform: rotate(270deg) skewY(180deg);">
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 5px;">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px;">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 30px;">
</div>
<div class="bouble">
<input type="radio" style="position: relative; background: white; float: left; width: 10px; right: 10px; height: 10px; border-radius: 100%; z-index: 100; margin-top: 25px;">
</div>
</div>
</div>
</body>
</html>