There is large square and small square that the large square is the top layer. When I click only on the large square I want that the click event of the large square will play. When I click on the small square I want that both of the click events will play.

I don't want to put one div into another.

Thanks in advance :-)

The component:

function App() {
    const clickOnSmall = () => {
        console.log('SMALL')
    }
    const clickOnLarge = () => {
        console.log('LARGE')
    }
    return (
        <div className="App">
            <div className={'small'} onClick={clickOnSmall}></div>
            <div className={'large'} onClick={clickOnLarge}></div>
        </div>
    )
}

The CSS:

.large {
    background: rgba(255, 0, 0, 0.4);
    width: 50%;
    height: 50%;
    position: absolute;
    left: 25%;
    top: 25%;
    z-index: 2;
}

.small {
    background: rgba(0, 255, 0, 0.2);
    width: 30%;
    height: 30%;
    position: absolute;
    left: 35%;
    top: 35%;
    z-index: 1;
}

The browser: browser

There is large square and small square that the large square is the top layer. When I click only on the large square I want that the click event of the large square will play. When I click on the small square I want that both of the click events will play.

I don't want to put one div into another.

Thanks in advance :-)