当div使用显示网格或flex时，SVG不浮动在div上。

Question

我正在尝试使用SVG创建一个粘性菜单。我遇到的问题是菜单后的div有Display: grid；因此，即使粘稠的SVG正在工作，在div之前显示一个空白(对应于SVG的高度)。我注意到，只有当我使用display grid or flexbox、使用display: block时才会发生这种情况；粘性SVG以正确的方式浮动，而空白却没有显示出来。

是否有一种方法可以避免从SVG中显示白色区域，并且仍然能够使用网格或柔性盒？我希望菜单能贴在整个网站上。所以我才没把它放进电视里。

这是粘性菜单的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;
  }
}

这是菜单后面的分区的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

问题不在于粘性，但这是由于您正在使用的浮点数。在默认情况下，浮动元素将重叠块元素，但在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>

​

上面的代码是预期的结果，但是如果我们移除浮点数，它就不会这样运行。

​

.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而不是粘性，因为您的元素是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>

​