Они выглядят по-разному ... совсем по-другому на Chrome и Firefox .Кто-нибудь знает в чем здесь проблема?Я сделал какую-то ошибку или Chrome имеет специальный алгоритм наложения?
Что я вижу на Chrome :
Что я вижу на Firefox :
обновление: отключите аппаратное ускорение в Chromeисправить это для меня .. Но это не исправить ...
.root {
position: relative;
margin: 100px 100px;
width: 60px;
height: 60px;
background: rgba(0, 200, 0, 1);
}
.square {
position: absolute;
width: 100%;
height: 100%;
}
.square1 {
left: -15px;
background: rgba(200, 0, 0, 0.5);
z-index: 1;
}
.square-ref {
top: -60px;
background: rgba(100, 100, 0, 1);
z-index: 3;
}
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="root">
<div class="square square1"></div>
<div class="square square2"></div>
<div class="square square-ref"></div>
</div>
</body>
</html>