Как спрятать псевдоэллимент за родителя

@Al_lord · Регистрация: 11.01.2014

Author24 — интернет-сервис помощи студентам

Доброго времени суток, вот я встретился с такой принципиальной ситуацией, думаю многие с подобным встречались, может кто нашел решение ?
А задачка казалось бы простая;
Уточню : нужно чтобы синий квадратик спрятался за зеленым.
http://plnkr.co/edit/tCDBawcA3... ?p=preview

CSS

.bod{
  width:200px;
  height:200px;
  background: #f00;
  position: relative;
}
.a{
  width:100px;
  height: 100px;
  background: #0f0;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  z-index: 10;
}
.a:befor
{
  width:100%;
  height: 100%;
  content: '';
  background: #00f;
  position: absolute;
  top:10px;
  left:0;
  z-index:20;
}

HTML5

<!DOCTYPE html>
<html>
 
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
 
  <body>
    <div class="bod">
  <div class="a"></div>
</div>
  </body>
 
</html>

	23.04.2015, 17:25