首页 > 解决方案 >
周围的元素 to overlap it whilst still being able to click on the <iframe> and the <a>'s in the <p>'s</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>javascript - <p>周围的元素<iframe> to overlap it whilst still being able to click on the <iframe> and the <a>'s in the <p>'s</h1> </div> <div class="con"> <h3>问题描述</h3> <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><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<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>
<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>
<p class="author">标签： <span>javascript</span><span>html</span><span>css</span><span>iframe</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p>You should try this...</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<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>
</p>
</div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/57571415.html">java - BuildConfigField 决定如何定义成员（枚举）</a></li><li><a href="/question/57571416.html">python - 应用更改后如何比较相同的字典？（Python）</a></li><li><a href="/question/57571424.html">json - 返回值的“三元逻辑”：foo、bar 或 error</a></li><li><a href="/question/57571429.html">node.js - express js的正确结构是什么？</a></li><li><a href="/question/57571434.html">php - Php/mysql：如何在多个表中插入大量行，仅在 2 个查询中</a></li><li><a href="/question/57571436.html">machine-learning - 如何为多个设备训练一个模型</a></li><li><a href="/question/57571438.html">python - 复制 .docx 文件的一部分（保留格式和图像）</a></li><li><a href="/question/57571439.html">r - R中的Box Cox变换，应用于列</a></li><li><a href="/question/57571440.html">angular - 对于 Angular 材料，禁用输入的自动填充或自动完成建议？</a></li><li><a href="/question/57571443.html">sql - 按大小写排序</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>