I am using aframe library for 360 degree/panorama image view. All is fine but only problem is on fullscreen mode where this library hides everything except image scene, what i want is to show custom close button with which user can click and close the scene. I applied css z-index but still no success. Any solution will be appreciated. thanks
<html>
<head>
<title>360 degree images Viewer</title>
</head>
<body>
<div>
<!-- <div class="shadow" style="width: 100vw;height: 350px;position: absolute;background-color: black;opacity: 0.1;z-index: 999;"></div> -->
<!-- <img src="rotate.png" alt="" style="position:absolute; z-index:999;"> -->
<a-scene embedded style="width:100%; height:350px;" rotation="0 -130 0">
<a-sky src="chilhowee_lake_panorama_516853.jpg" ></a-sky>
</a-scene>
</div>
<button id="myclose" style="z-index: 99999999999 !important;
position: fixed !important;
top: 10px !important;
background: transparent;
border: 1px solid #000;
font-size: 20px;
cursor: pointer;
color: #000;
border-radius: 5px 4px;
padding: 10px;
right: 30;">close</button>
<script src="aframe.js"></script>
</body>
</html>