How to disable links in iframe using z-index?

@darrion.kuhn 

To disable links in an iframe using z-index, you can overlay an element with a higher z-index on top of the iframe. This element will prevent any clicks from reaching the iframe's content.

Here is an example of how you can achieve this using HTML and CSS:

1. Create a div element that will be placed on top of the iframe:

1
2

<div class="overlay"></div>
<iframe src="https://www.example.com"></iframe>

1. Style the overlay element using CSS to cover the entire iframe and have a higher z-index:

1
2
3
4
5
6
7
8
9

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(255, 255, 255, 0); /* transparent background */
}

1. Add some JavaScript code to ensure that the overlay element is clickable and prevents clicks from reaching the iframe:

1
2
3

document.querySelector('.overlay').addEventListener('click', function(event) {
    event.preventDefault();
});

With this setup, the overlay element will cover the iframe and prevent any clicks from reaching the links within the iframe. Users will not be able to interact with the links in the iframe until the overlay element is removed or hidden.