DIV与SVG重叠

Question

我正在尝试使多个div与网站页脚中的SVG文件重叠。但是，div并不与SVG文件重叠，而是仅显示在文件下方。我试图将position: absolute放在div上，并通过margin进行移动，但是它们仍然没有重叠。这是代码示例。

.footer-svg {
  height: auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: -5;

}

.site-footer {
  position: relative;
  a {
    color: blue;
    text-decoration: none;
  }
}

.social-footer-nav{
  ul{
    ///display: flex;
    list-style-type: none;
    margin: 0;
  }
}

.footer-nav{
  ul{
    ///display: flex;
    list-style-type: none;
    margin: 0;
  }
}

.custom-footer-logo{
  max-width: 200px;
}

.footer-grid-container{
  position: absolute;
  margin-bottom: 50px;
 }

<footer id="colophon" class="site-footer">
        <div class="footer-svg">
            <svg viewBox="0 0 1440 994" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
                    <linearGradient x1="8.1630294%" y1="27.068938%" x2="100%" y2="84.5516634%" id="linearGradient-1">
                        <stop stop-color="#DD4042" offset="0%"></stop>
                        <stop stop-color="#850303" offset="100%"></stop>
                    </linearGradient>
                </defs>
                <g id="Wisco-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="homepage" transform="translate(0.000000, -3055.000000)" fill="url(#linearGradient-1)">
                        <path d="M0,3552 C447.129059,3296.3499 752.462393,3244.3499 916,3396 C1079.53761,3547.6501 1254.20427,3433.98343 1440,3055 L1440,4049 L0,4049 L0,3552 Z" id="Rectangle-17"></path>
                    </g>
                </g>
            </svg>
        </div>
        <div class="footer-grid-container">
            <div class="footer-four-columns-push-one">
                <div class="custom-footer-logo">
                    <img src="<?php echo get_theme_mod( 'footer_logo' ); ?>">
                </div>
                <div class="site-info">
                    <nav class="footer-nav">
                        <?php
                        wp_nav_menu( array(
                            'theme_location' => 'footer',
                            'menu_id'        => 'footer-menu',
                        ) );
                        ?>
                    </nav>
                </div><!-- .site-info -->
            </div>
            <div class="footer-four-two-columns">
                <div class="footer-nav-div">
                    <nav class="social-footer-nav">
                        <?php
                        wp_nav_menu( array(
                            'theme_location' => 'social',
                            'menu_id'        => 'social-menu',
                        ) );
                        ?>
                    </nav>
                </div><!--- .footer-nav-div -->
            </div>
        </div>
	</footer><!-- #colophon -->
</div><!-- #page -->

有什么想法吗？您可以在http://dev-wisco-radio.pantheonsite.io/

上看到实时代码示例

Answer 1

如果我正确理解您的情况，则可能是使用错误的CSS规则放置绝对位置div的情况。考虑使用如下所示的“顶部”和/或“正确” CSS规则，以实现所需的位置：

.footer-svg {
  height: auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: -5;

}

.site-footer {
  position: relative;
  a {
    color: blue;
    text-decoration: none;
  }
}

.social-footer-nav{
  ul{
    ///display: flex;
    list-style-type: none;
    margin: 0;
  }
}

.footer-nav{
  ul{
    ///display: flex;
    list-style-type: none;
    margin: 0;
  }
}

.custom-footer-logo{
  max-width: 200px;
}

.footer-grid-container{
  position: absolute;

/* Achieve more predictable placement of the absolute container 
   by top, left, right, bottom rather than margins */
  
  top:500px;

/* To make the absolute positioned div stretch the whole way across
   the screen, set both left and right with values. These can be 
   non-zero if you want them to be inset slightly from either side */

  left:0px;
  right:0px;
 }

<footer id="colophon" class="site-footer">
        <div class="footer-svg">
            <svg viewBox="0 0 1440 994" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
                    <linearGradient x1="8.1630294%" y1="27.068938%" x2="100%" y2="84.5516634%" id="linearGradient-1">
                        <stop stop-color="#DD4042" offset="0%"></stop>
                        <stop stop-color="#850303" offset="100%"></stop>
                    </linearGradient>
                </defs>
                <g id="Wisco-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="homepage" transform="translate(0.000000, -3055.000000)" fill="url(#linearGradient-1)">
                        <path d="M0,3552 C447.129059,3296.3499 752.462393,3244.3499 916,3396 C1079.53761,3547.6501 1254.20427,3433.98343 1440,3055 L1440,4049 L0,4049 L0,3552 Z" id="Rectangle-17"></path>
                    </g>
                </g>
            </svg>
        </div>
        <div class="footer-grid-container">
            <div class="footer-four-columns-push-one">
                <div class="custom-footer-logo">
                    <img src="<?php echo get_theme_mod( 'footer_logo' ); ?>">
                </div>
                <div class="site-info">
                    <nav class="footer-nav">
                        <?php
                        wp_nav_menu( array(
                            'theme_location' => 'footer',
                            'menu_id'        => 'footer-menu',
                        ) );
                        ?>
                    </nav>
                </div><!-- .site-info -->
            </div>
            <div class="footer-four-two-columns">
                <div class="footer-nav-div">
                    <nav class="social-footer-nav">
                        <?php
                        wp_nav_menu( array(
                            'theme_location' => 'social',
                            'menu_id'        => 'social-menu',
                        ) );
                        ?>
                    </nav>
                </div><!--- .footer-nav-div -->
            </div>
        </div>
	</footer><!-- #colophon -->
</div><!-- #page -->