css - 当 div 使用显示网格或 flex 时，粘性 SVG 不会 float 在 div 上

Question

我正在尝试使用 SVG 创建一个粘性菜单。我遇到的问题是菜单后的 div 有 Display: grid;因此，即使粘性 SVG 正常工作，也会在 div 之前显示一个空白区域(对应于 SVG 的高度)。我注意到只有当我使用 display grid or flexbox 时才会发生这种情况，如果我使用 display: block;粘性 SVG 以正确的方式 float 并且不显示空白。

有没有办法避免显示 SVG 中的白色区域并且仍然能够使用网格或 flexbox？我想让菜单贴在整个网站上。这就是为什么我没有把它放在 div 中。

这是粘性菜单的 CSS:

.circle {
    position: sticky;
    top: 0%;
    opacity: 0;
    animation: mymove 4s forwards;
    float: left;
    transform: scale(0.1);
}

@keyframes mymove {
  5% {transform: translate(0, 130%) scale(0.5);
  opacity: 1;
  }
  10% {
      transform: translate(0, 40%) scale(0.5);
  }
  12% {transform: translate(0,130%) scale(0.5);
  }
  35% {transform: translate(350%,130%) scale(0.5);
  }
  100% {
      transform:translate(350%,130%) rotate(300deg) scale(0.2);
      opacity: 1;
  }
}

这是菜单后面的 Div 的 CSS:

.box {
    display: grid;
    grid-template-columns: auto auto auto;
    height: 1000px;
    width: 100%;
    background-color: aqua;
}

这是一支带有元素副本的笔

body {
    margin: 0;
}
path:hover {
    fill: yellow;
    transform: translate(5% 5%);
    transform-origin: 50% 50%;
    transition-duration: 1s;
}
.box {
    display: grid;
    grid-template-columns: auto auto auto;
    height: 1000px;
    width: 100%;
    background-color: aqua;
}
.inside-box {
    background-color:#8f0606;
    height: 500px;
    width: 10rem;
    margin: auto;
    float: left;
}
.box2 {
    height: 1000px;
    width: 100%;
    background-color: rgb(111, 0, 255);

}

.circle {
    position: sticky;
    top: 0%;
    opacity: 0;
    animation: mymove 4s forwards;
    float: left;
    transform: scale(0.1);
}

@keyframes mymove {
  5% {transform: translate(0, 130%) scale(0.5);
  opacity: 1;
  }
  10% {
      transform: translate(0, 40%) scale(0.5);
  }
  12% {transform: translate(0,130%) scale(0.5);
  }
  35% {transform: translate(350%,130%) scale(0.5);
  }
  100% {
      transform:translate(350%,130%) rotate(300deg) scale(0.2);
      opacity: 1;
  }
}

.plus {
    opacity: 0;
    animation: reveal 5s forwards;
}

@keyframes reveal {
    80% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
  }

<svg class="circle" width="341" height="341" viewBox="0 0 393 395" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs>
                <circle id="path-1" cx="197.5" cy="195.5" r="182.5"></circle>
                <filter x="-4.1%" y="-4.1%" width="108.2%" height="108.2%" filterUnits="objectBoundingBox" id="filter-2">
                    <feMorphology radius="5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
                    <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
                    <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
                    <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
                    <feColorMatrix values="0 0 0 0 0.106884058   0 0 0 0 0.0827088718   0 0 0 0 0.0827088718  0 0 0 0.163925918 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
                </filter>
                <filter x="-3.7%" y="-3.7%" width="107.4%" height="107.4%" filterUnits="objectBoundingBox" id="filter-3">
                    <feMorphology radius="2" operator="erode" in="SourceAlpha" result="shadowSpreadInner1"></feMorphology>
                    <feGaussianBlur stdDeviation="1.5" in="shadowSpreadInner1" result="shadowBlurInner1"></feGaussianBlur>
                    <feOffset dx="0" dy="0" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
                    <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
                    <feColorMatrix values="0 0 0 0 0.105882353   0 0 0 0 0.0823529412   0 0 0 0 0.0823529412  0 0 0 0.111778846 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
                </filter>
                <path d="M226.888266,167.71921 L297.316815,167.71921 L297.316815,226.71921 L226.888266,226.71921 L226.888266,297.485871 L167.888266,297.485871 L167.888266,226.71921 L97.3168146,226.71921 L97.3168146,167.71921 L167.888266,167.71921 L167.888266,97.4858706 L226.888266,97.4858706 L226.888266,167.71921 Z" id="path-4"></path>
                <filter x="-5.7%" y="-4.8%" width="111.5%" height="111.5%" filterUnits="objectBoundingBox" id="filter-5">
                    <feMorphology radius="1.5" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
                    <feOffset dx="0" dy="2" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
                    <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
                    <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
                    <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
                </filter>
            </defs>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Oval">
                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
                    <use fill="#AA3F02" fill-rule="evenodd" xlink:href="#path-1"></use>
                    <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
                    <use stroke-opacity="0" stroke="#AA3F02" stroke-width="6" xlink:href="#path-1"></use>
                </g>
                <g class="plus" id="Rectangle-2" transform="translate(197.316815, 197.485871) rotate(60.000000) translate(-197.316815, -197.485871) ">
                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
                    <path stroke="#3F1616" stroke-width="1" d="M226.388266,97.9858706 L168.388266,97.9858706 L168.388266,168.21921 L97.8168146,168.21921 L97.8168146,226.21921 L168.388266,226.21921 L168.388266,296.985871 L226.388266,296.985871 L226.388266,226.21921 L296.816815,226.21921 L296.816815,168.21921 L226.388266,168.21921 L226.388266,97.9858706 Z" stroke-linejoin="square" fill="#1D1639" fill-rule="evenodd"></path>
                </g>
            </g>
        </svg>
<div class="box">
    <div class="inside-box"></div>
    <div class="inside-box"></div>
    <div class="inside-box"></div>
</div>
<div class="box2"></div>

</div>

Answer 1

问题不在于粘性，而在于您使用的 float 。默认情况下， float 元素会与 block 元素重叠，但 flexbox 和 CSS 网格不会出现这种情况。

这是您的问题的简化版本。

.box {
  display:flex;
  width:100%;
  height:200px;
  background:red;
}

.stick {
  height:100px;
  width:100px;
  float:left;
  background:green;
  position:sticky;
  top:0;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="stick">

</div>
<div class="box">

</div>

现在，如果您删除 display:flex，您将拥有:

.box {
  width:100%;
  height:200px;
  background:red;
}

.stick {
  height:100px;
  width:100px;
  float:left;
  background:green;
  position:sticky;
  top:0;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="stick">

</div>
<div class="box">

</div>

上面的代码是预期的结果，但如果我们删除 float，它就不会这样了

.box {
  width:100%;
  height:200px;
  background:red;
}

.stick {
  height:100px;
  width:100px;
  background:green;
  position:sticky;
  top:0;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="stick">

</div>
<div class="box">

</div>

---

您有两个解决方案。第一个是考虑 position:fixed 而不是 sticky，因为您的元素是 DOM 中的第一个元素，并且您希望它对整个站点具有粘性。

.box {
  width:100%;
  display:flex;
  height:200px;
  background:red;
}

.stick {
  height:100px;
  width:100px;
  background:green;
  position:fixed;
  top:0;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="stick">

</div>
<div class="box">

</div>

或者您可以考虑另一个容器的负边距等于粘性元素的高度。

.box {
  width:100%;
  display:flex;
  height:200px;
  background:red;
  margin-top:-100px;
}

.stick {
  height:100px;
  width:100px;
  background:green;
  position:sticky;
  top:0;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="stick">

</div>
<div class="box">

</div>