# Overlapping Html in react-three-fiber

**URL:** <https://discourse.threejs.org/t/overlapping-html-in-react-three-fiber/46455>\
**Category:** Questions\
**Tags:** react-threedrei, react-three-fiber\
**Created:** [January 3, 2023, 1:12pm UTC](https://discourse.threejs.org/t/overlapping-html-in-react-three-fiber/46455 "2023-01-03T13:12:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![thewhiteshadow](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@thewhiteshadow](https://discourse.threejs.org/u/thewhiteshadow)\
**Post date:** [January 3, 2023, 1:12pm UTC](https://discourse.threejs.org/t/overlapping-html-in-react-three-fiber/46455/1 "2023-01-03T13:12:08Z")

</div>

![image_2023-01-03_183431761](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/f/5f5537c028f0bf947d36df63955736bebb676c6b.png)  
As seen in the image, my modal and annotations are overlapping. I want the modal to be above these annotations. I have tried setting the z-index but it doesn’t seem to work.

Here’s the sandboxcode for the same. The modal can opened by clicking on the camera model.

> **[my-project-sandbox - CodeSandbox](https://codesandbox.io/s/my-project-sandbox-57ighq)**
>
> my-project-sandbox by drharshit27 using @react-three/drei, @react-three/fiber, antd, react, react-dom, react-scripts, three

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [January 3, 2023, 1:24pm UTC](https://discourse.threejs.org/t/overlapping-html-in-react-three-fiber/46455/2 "2023-01-03T13:24:39Z")

</div>

```plaintext
<Html
  zIndexRange={[16777271, 0]} // Z-order range (default=[16777271, 0])

```

the modal should either be op top of canvas or have a higher zindex. that means you need to lower the range on the drei/html element.

btw there was also a new release yesterday, html will now naturally occlude [https://twitter.com/0xca0a/status/1609939896155652096](https://twitter.com/0xca0a/status/1609939896155652096)

---

<div class="post-metadata">

**Author:** ![SAURABH\_UPADHYAY](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/saurabh_upadhyay/32/48936_2.png) [@SAURABH\_UPADHYAY](https://discourse.threejs.org/u/SAURABH_UPADHYAY)\
**Post date:** [June 20, 2024, 6:03am UTC](https://discourse.threejs.org/t/overlapping-html-in-react-three-fiber/46455/3 "2024-06-20T06:03:37Z")

</div>

I’m facing the same issue, when I set the index range to zIndexRange={[16777271, 0]}, if I have multiple modal then, it is assigning the zindex in random manner, which results some higher and lower zindex for the modal. And the modal button with higher zIndex comes in front of the modal with lower zindex. If I set same zIndex for all the modal then also it has same problem (zIndexRange={[1, 0]}). Is there a way we can update the zIndex of the icon when it is selected…  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/2/62c07c31ef8ed4ee8285aba3cb48e4e2e086b3bb.jpeg)