---
date: 2024-02-26 11:57
description: With CSS you can disable any interactions with an element and directly control the underlying element
tags: HTML, CSS
draft: false
---
# Interacting with underlying element in HTML
I know that the title is a bit weird. I was trying to interact with a video under an iPhone Bezel Screen frame.
```html
```
Turns out, you can disable pointer events!
In Tailwind, it is as simple as adding `pointer-events-none` to the bezel screen.
In CSS, this can be done by:
```css
.className {
pointer-events: none
}
```
Let us try this in a simple example.
## Example
Here, we create a button and overlay a transparent box
```html
A box with 200px height and 200px width
```
A box with 200px height and 300px width
As you can see, you cannot click the button because the red box comes in the way. We can fix this by adding `pointer-events: none` to the box.
```html
