[英]z-index issue whilst using scrollmagic
I'm using scrollmagic to display content in a project I'm currently working on. 我正在使用scrollmagic在我当前正在处理的项目中显示内容。 The design I have uses 'wedges' at the top and bottom of the containers. 我的设计在容器的顶部和底部使用了“楔形物”。 I have managed to achieve the result that I want using an svg for the 'wedge' and by sticking the first one to the top of the page with a z-index: 1; 我设法通过将svg用作'wedge'并通过使用z-index将第一个粘贴到页面顶部来实现了结果:1;
As a result this layer overlays the rest of the content that subsequently follows. 结果,该层覆盖了随后跟随的其余内容。 Please see the codepen below. 请参阅下面的代码笔。
http://codepen.io/oliver_randell/pen/MyLNON http://codepen.io/oliver_randell/pen/MyLNON
I really need to be able to click the buttons in the promo boxes! 我真的需要能够单击促销框中的按钮!
Any help would be greatly appreciated. 任何帮助将不胜感激。
<section id="intro" class="intro">
<div class="content">
<div class="row">
<div class="medium-10 medium-offset-1 large-8 large-offset-2 columns">
<div class="fade-trigger"></div>
<h2>Intro title</h2>
<h3>Intro Subtitle</h3>
<p>Some extract text</p>
</div>
</div>
</div>
</section>
<section class="promo-boxes">
<!-- THIS IS WHERE THE TOP WEDGE NEEDS TO SIT -->
<div id="pinned-trigger1">
<div id="pinned-element1">
<div class="top-wedge"></div>
</div>
</div>
<!-- BOX 1 -->
<div id="pinned-trigger2" class="promo box1 full-screen">
<div id="pinned-element2">
<div class="wrapper">
<div class="content">
<div class="img-container">
<div class="img" style="background-image: url('https://unsplash.it/800/800');"></div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
<a href="#_" class="button">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-trigger4" class="promo box3">
<div class="content">
<div class="img-container">
<div class="img" style="backgroundimage:url('img-link.png');">
</div>
</div>
<div class="text">
<div class="row">
<div class="large-4 large-offset-8 columns">
<div class="valign-middle">
<div>
<h3>Title</h3>
<p>Text</p>
<a href="#_" class="button">Button 2</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pinned-element4">
<div class="bottom-wedge show-for-large"></div>
</div>
</div>
</section>
<section class="next-section full-screen">
<h2>this is the next section</h2>
</section>
So... I just added: 所以...我刚刚添加:
#pinned-trigger1 {
position-events: none;
}
And voila!! 瞧!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.