单击“锚点”标签会产生要跳转的元素

Question

当我单击锚标记（例如#about）时，元素会产生奇怪的行为。 普通方式：！[普通]： https : //i.imgur.com/Kqzu0Fe.jpg

单击锚点链接后的奇怪行为：！[strange]： https : //i.imgur.com/5Izy4Zr.jpg

我尝试将带有定位标记的关联文本向下移动（在本例中为“我们是谁？”），每次向下移动时，触发定位标记都会使元素返回到一个奇怪的位置（如图片2）。

                    <ul class="header_home__bar-container">
                        <li class="header_home__bar-container--el"><a href="#about" class="header_home__bar--button">About Us</a></li>
                        <li class="header_home__bar-container--el"><a href="#services" class="header_home__bar--button">Services</a></li>
                        <li class="header_home__bar-container--el"><a href="#opinions" class="header_home__bar--button">Clients</a></li>
                        <li class="header_home__bar-container--el"><a href="#contactl" class="header_home__bar--button">Contact</a></li>
                    </ul>

                    <h1 class="shift-down-small" id="about">Who are we?</h1>

编辑 ：我发现产生此异常； 这是位于右侧（绿色大心脏）的图像，该图像设置为以下css属性：

    &--heart {


            &-1 {
                box-sizing: border;
                display: inline-block;
                position: absolute;
                width: 50%;
                height: 100%;
                top: 15%;
                right: 0%;
            }

删除图像可以解决问题，但显然我需要它！ 任何想法？

Answer 1

找到了解决方法！ 对于可能遇到这一天的人，解决方案是仅从父元素（包含所有子元素）中删除（至少在我的情况下） overflow: hidden CSS属性。

.section_home_whatwedo {

    position: relative;
    **// overflow: hidden;**
    box-sizing: content-box;
    width: 100%;
    height: 10vh;
    background: url('../design assets/SVG Main/SVG/AboutBG1.svg') no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 55rem 0rem;
    margin-top: -25rem;
    z-index: 6;