html - CSS中如何防止翻转卡重叠导航栏

问题描述

我已将 W3Schools CSS 用于翻转卡片https://www.w3schools.com/howto/howto_css_flip_card.asp用于我正在构建的网站，总体而言，它运行良好。

然而，卡背是绝对定位的，这导致了一个我不知道如何解决的不寻常问题。

导航栏是粘性的，当页面向上滚动时，页面上的所有元素都在其下方，但翻转卡正面图像除外：

注意汉堡菜单是如何被卡片的正面遮住的，而不是背面。

理想情况下，我希望这不会发生。我知道问题出在 CSS

position: absolute;

但这对于卡片保持作为一个在自己的轴上旋转的对象是必要的。一种解决方法是将第一张图片不放在翻转卡片中，而是放在普通图片元素中，但我希望能够在画廊页面上放置 15 张这样的卡片，但没有这种重叠。

如果问题不清楚，请要求任何澄清。

上面指向 W3Schools 的链接包含了所有使用的 CSS，下面的 HTML 是用于相关页面元素的内容，它全部基于 CSS 网格：

<div class="maincontent-news">
                    <h2>News</h2>
                    <p>
                    Grid Collective is pleased to be included in the <a href="https://mcauleyplace.ie/">McAuley Place Artist in the Lobby</a> for 2021. Although restrictions meant it could not take place as planned in early April, we hope that it will go ahead this year. In the meantime, we continue to work collaboratively on the given theme of Hope and Rebirth.
                    </p>
                    <br>
                    <p>
                    Many of the pictures on the site are <em>flip cards</em>, that is, if you hover the mouse over the pictureit will flip over to reveal further information on the back.
                    </p>
                    <br>
                    <br>
    
                    <div class="gridpicture">
                        <div class="picture">

                            <div class="flip-card">
                            
                              <div class="flip-card-inner">
                              
                                <div class="flip-card-front">
                                  <img src="images/light.png" alt="Grid Collective" style="width:18.75em;height:18.75em; alt="Where the light shines in">
                                </div>
                                
                                <div class="flip-card-back">
                                    <h3 class="bernard">Where the light shines in</h3>
                                    <p class="bernard">Bernard van Giessen</p>
                                    <p>Photography</p>
                                    <p>Exhibition: <i><a href="exhiboptions.html">So many options...</a></i></p>
                                </div>
                                
                              </div>
                              
                            </div>

                        </div>

                    </div>
                    
                    
                </div><!-- END maincontent-news-->

一切顺利，

德莫特

标签： htmlcss

html - CSS中如何防止翻转卡重叠导航栏

问题描述

解决方案

推荐阅读