如何在固定父级后面显示元素？

Question

插图：如何在菜单背景后面显示徽标轮廓（徽标的孩子）？

徽标是中心菜单的一部分，但不一定在中间（取决于菜单项名称），所以对我来说，最好的解决方案是仍然在logo div中的轮廓如下：

<img src="background-image.jpg">
<div class="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
      <div class="logo">
        <div class="contour"></div>
      </div>
    </li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</div>

我有什么：

我想要的是什么：

我已经浏览了几十个针对stackoverflow提供的类似问题的解决方案，但似乎都不适合......此时，我尝试设置z-index，将div.contour移出div.logo，将.contour设置为伪类:before或:after，为position: absolute设置.contour或与overflow: hidden一起使用。有没有CSS解决方案（不使用JS）？

JSFiddle Sample here

Answer 1

我首选的解决方案是使用一个背景SVG，用于深绿色和浅绿色形状以及橙色轮廓。那个背景将通过CSS集中。

整个“轮廓部分围绕两个不同形状的元素”看起来可以用普通的浏览器撤销（也许是通过CSS的一些面具魔法......）

Answer 2

好吧，你总是可以欺骗它，首先添加一个before伪元素来隐藏你圈子的顶部，然后添加after伪元素来覆盖你的圈子，另一个没有边框。

像这样：

＆＃13;

＆＃13;

* {
  position: relative;
}

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

.menu {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  background: darkcyan;
  border-bottom: 5px solid orange;
  text-align: center;
  z-index: 99;
}

.menu ul li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
}

.logo {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: cadetblue;
}
.anotherclass:before {
  content:"";
  display:block;
  background-color:darkcyan;
  height:50px;
  width:110px;
  position:absolute;
      top: -16px;
    left: -5px;  
}
.anotherclass:after {
  content:"";
  display:block;
  background-color:trasparent;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background: cadetblue;
  position:absolute;
  top:0px;
  left:0px; 
}

.contour {
  border: 5px solid orange;
  left: -5px;
  top: -5px;
  z-index: -1;
}

＆＃13;

<img src="https://images.freeimages.com/images/large-previews/0b3/burning-tree-1377053.jpg" width="100%">
<div class="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
      <div class="logo anotherclass">
        <div class="logo contour"></div>
      </div>
    </li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

注意我在你的html中添加了另一个类，因为你有2＆＃34; logo＆＃34;班级（父母和孩子）。如果你愿意，你可以纠正这个。

如果您现在对徽标图片有疑问，可以将background-image作为after伪元素中的属性放置，或者如果您使用html <img> z-index应该将它放在after伪元素上面可能正常工作。