如何将SVG置于锚点元素后方并使二者底部对齐？

要让紫色波浪SVG处于<a>及上方元素后方，同时和<a>底部对齐，可通过CSS定位和层级调整实现，具体步骤如下：

1. 调整HTML结构 #

将底部的<footer>、<a>和<svg>包裹在一个容器内，便于定位控制：

<div class="bottom-container">
  <footer>Shamar's Domestic Cleaning Services</footer>
  <a href="example@gmail.com">Built by Riverstone Technologies UK © 2023</a>
  <svg xmlns:xlink="http://www.w3.org/1999/xlink" id="wave" viewBox="0 0 1440 490" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0">
                <stop stop-color="rgba(161, 11, 255, 1)" offset="0%" />
                <stop stop-color="rgba(161, 11, 255, 1)" offset="100%" />
            </linearGradient>
        </defs>
        <path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)"
            d="M0,343L30,318.5C60,294,120,245,180,187.8C240,131,300,65,360,73.5C420,82,480,163,540,171.5C600,180,660,114,720,138.8C780,163,840,278,900,310.3C960,343,1020,294,1080,253.2C1140,212,1200,180,1260,147C1320,114,1380,82,1440,114.3C1500,147,1560,245,1620,302.2C1680,359,1740,376,1800,383.8C1860,392,1920,392,1980,375.7C2040,359,2100,327,2160,294C2220,261,2280,229,2340,187.8C2400,147,2460,98,2520,65.3C2580,33,2640,16,2700,32.7C2760,49,2820,98,2880,163.3C2940,229,3000,310,3060,294C3120,278,3180,163,3240,98C3300,33,3360,16,3420,57.2C3480,98,3540,196,3600,269.5C3660,343,3720,392,3780,400.2C3840,408,3900,376,3960,367.5C4020,359,4080,376,4140,392C4200,408,4260,425,4290,432.8L4320,441L4320,490L4290,490C4260,490,4200,490,4140,490C4080,490,4020,490,3960,490C3900,490,3840,490,3780,490C3720,490,3660,490,3600,490C3540,490,3480,490,3420,490C3360,490,3300,490,3240,490C3180,490,3120,490,3060,490C3000,490,2940,490,2880,490C2820,490,2760,490,2700,490C2640,490,2580,490,2520,490C2460,490,2400,490,2340,490C2280,490,2220,490,2160,490C2100,490,2040,490,1980,490C1920,490,1860,490,1800,490C1740,490,1680,490,1620,490C1560,490,1500,490,1440,490C1380,490,1320,490,1260,490C1200,490,1140,490,1080,490C1020,490,960,490,900,490C840,490,780,490,720,490C660,490,600,490,540,490C480,490,420,490,360,490C300,490,240,490,180,490C120,490,60,490,30,490L0,490Z" />
    </svg>
</div>

2. 更新CSS样式 #

添加容器的相对定位规则，同时调整SVG的定位、层级和尺寸：

body {
  margin: 0;
}

a {
  font-size: 0.8rem;
  display: block;
  text-align: center;
  color: black;
  margin-bottom: 0; /* 移除默认边距，确保和SVG底部无空隙 */
}

footer {
  text-align: center; /* 替换-webkit-center，提升兼容性 */
  padding: 1.25%;
}

/* 底部容器：作为SVG定位的参考基准 */
.bottom-container {
  position: relative;
  width: 100%;
}

/* SVG样式调整 */
#wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto; /* 保持SVG原始比例 */
  z-index: -1; /* 将SVG置于所有内容后方 */
  transform: rotate(0deg);
  transition: 0.3s;
}

关键说明 #

• 给底部容器设置position: relative，让内部绝对定位的SVG以容器为参考，避免SVG相对于整个页面定位。
• SVG设置bottom: 0后，其底部会和容器底部（即<a>元素的底部）精准对齐，width: 100%确保SVG铺满页面宽度。
• z-index: -1直接将SVG层级降低，使其处于<footer>和<a>元素后方，不会遮挡内容。
• 移除<a>的默认底部外边距，避免SVG和锚点之间出现不必要的空隙。

内容的提问来源于stack exchange，提问作者IsaacNewtonGravity