javascript - <p> elements surrounding <iframe> to overlap it whilst still being able to click on the <iframe> and the <a>'s in the <p>'s

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65913304/p-elements-surrounding-iframe-to-overlap-it-whilst-still-being-able-to-click

Answer 1

You should try this...

#roll{
    width:500px;
    margin-right:auto;
    margin-left:auto;
}

p{
    position:relative;
    font-size:1.5em;
    z-index: 1;
}

.codepoem{
    width:500px;
    height:200px;
}

.codepoem iframe{
    position:relative;
    width:calc(500px + 20vw); 
    margin-left:-10vw; /* center horizontal */
    height:calc(200px + 40vh);
    margin-top:-20vh; /* center vertical */
    /*z-index:1;*/
}