情况

<! doctype html>
<html>
<head>
<title></title>
<style>
.x {
border: 1px solid black;
position: relative;
}
.y {
width: 100px;
height: 100px;
border: 1px solid blue;
}
.z {
width: 100px;
height: 100px;
border: 1px solid green;
}
.n {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid red;
top: -30px;
left: 100px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div tabindex="0">
<div class="x">
<div class="y"></div>
<div class="z"></div>
<div class="n"></div>
</div>
</div>
</body>
<script>
</script>
</html>
我怎么让它的鼠标点击聚焦,不包含这个绝对定位的元素,还是原来的元素?