elements surrounding to overlap it whilst still being able to click on the <iframe> and the <a>'s in the <p>'s</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2021-01-27T05:22:13.867" class="fromnow">Jan 27 '21 at 05:22</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2021-01-27T14:17:28.037" datetime="2021-01-27T14:17:28.037">Jan 27 '21 at 14:17</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 83 times"> <span class="fc-light mr2">Viewed</span> 83 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="65913304" data-ownerid="7186201" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="65913304"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btn__unset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I'm hitting a problem with a p5js integration in a webpage. I'm trying to get two paragraph elements, positioned before and after an iframe, to overlap that iframe, whilst still allowing the iframe to be clickable, and still allowing the links in the paragraph elements to be clickable. I've fiddled around and read a lot about how z-index works and about pointer-events but I couldn't find a solution in these. Here is the minimal reproducible example :</p> <p>The example works as intended with the bottom text, but the top text is being overlapped wrong.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script> <!DOCTYPE html> <html> <head> <style> #roll { width: 500px; margin-right: auto; margin-left: auto; } p { position: relative; font-size: 1.5em; } .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;*/ } </style> </head> <body> <div id="roll"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vulputate et libero sit amet blandit. Integer mollis felis dui, vitae euismod nunc tincidunt sed. Aliquam eget libero sed ante interdum consectetur. Quisque a vulputate lorem. Morbi sit amet <a href="">scelerisque turpis.</a></p> <div class="codepoem"> <iframe src="https://editor.p5js.org/itsKaspar/embed/wUWKbsui6"></iframe> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="">scelerisque turpis.</a> Fusce vulputate et libero sit amet blandit. Integer mollis felis dui, vitae euismod nunc tincidunt sed. Aliquam eget libero sed ante interdum consectetur. Integer a placerat magna. </p> </div> </body> </html></code></pre> </div> </div> <p>note : I've purposefully created a container for the iframe to aid it in its underlapping behavior which direction could I go in from now ? is there a simple solution I am not seeing ? Thanks a lot</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jan 27 '21 at 11:17">edited Jan 27 '21 at 11:17</time> <a href="../../users/8620333/temani-afif" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8620333.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Temani Afif" /> </a> <div class="s-user-card--info"> <a href="../../users/8620333/temani-afif" class="s-user-card--link">Temani Afif</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">245,468</li> <li class="s-award-bling s-award-bling__gold" title="26 gold badges">26</li> <li class="s-award-bling s-award-bling__silver" title="309 silver badges">309</li> <li class="s-award-bling s-award-bling__bronze" title="415 bronze badges">415</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 27 '21 at 05:22">asked Jan 27 '21 at 05:22</time> <a href="../../users/7186201/kaspie" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7186201.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kaspie" /> </a> <div class="s-user-card--info"> <a href="../../users/7186201/kaspie" class="s-user-card--link">Kaspie</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">187</li> <li class="s-award-bling s-award-bling__bronze" title="11 bronze badges">11</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-65913304" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="65913304" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-116548116" class="comment js-comment " data-comment-id="116548116" data-comment-owner-id="8620333" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment116548116_65913304"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">z-index: 1; on p should work</span> – <a href="../../users/8620333/temani-afif" title="245,468 reputation" class="comment-user ">Temani Afif</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/65913304/p-elements-surrounding-iframe-to-overlap-it-whilst-still-being-able-to-click-o#comment116548116_65913304"><span title="2021-01-27T11:18:15.270 License: CC BY-SA 4.0" class="relativetime-clean">Jan 27 '21 at 11:18</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="65913788"></a> <div id="answer-65913788" class="answer accepted-answer" data-answerid="65913788" data-ownerid="4531451" data-score="1" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="65913788"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You should try this...</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;*/ }</code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 27 '21 at 06:17">answered Jan 27 '21 at 06:17</time> <a href="../../users/4531451/mohit-raiyani" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4531451.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mohit RaiYani" /> </a> <div class="s-user-card--info"> <a href="../../users/4531451/mohit-raiyani" class="s-user-card--link">Mohit RaiYani</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">236</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-65913788" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="65913788" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-116551287" class="comment js-comment " data-comment-id="116551287" data-comment-owner-id="7186201" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment116551287_65913788"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">completely my bad, on my original script my p elements werent positioned and so the z-index wouldn't take effect, thank you so much !</span> – <a href="../../users/7186201/kaspie" title="187 reputation" class="comment-user owner">Kaspie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/65913304/p-elements-surrounding-iframe-to-overlap-it-whilst-still-being-able-to-click-o#comment116551287_65913788"><span title="2021-01-27T13:15:44.277 License: CC BY-SA 4.0" class="relativetime-clean">Jan 27 '21 at 13:15</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>