Question

我有这样的导航：

#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.element {
    margin-right: 2em;
    color: #534728;
    width: 100px;
}

#logo {
    height: 125px;
    width: auto;
}

<div id="banner" class="banner-header">

    <a class="element" href="/">Home</a>
    <a class="element" href="/shop/">Shop</a>
    <a class="element" href="/our-story/">Our Story</a>
    <img id="logo" class="element" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/new-logo.png" />
    <a class="element" href="/products/">Products</a>
    <a class="element" href="/contact-us/">Contact Us</a>
    <a class="element" href="/foundation/">Foundation</a>

</div>

https://jsfiddle.net/v0uuak2u/2/

我现在要做的是添加一个位于导航下方的元素，但是在附图中的徽标底部上方

我试过添加一个元素并像这样使用z-index，但是当父类具有像这样的z-index时，它不可能有子z-index：

https://jsfiddle.net/6w8nbjvq/10/

任何人对如何解决我遇到的问题都有任何想法？

Answer 1

这是怎么回事？

HTML

#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 99999;
}

.element {
    margin-right: 2em;
    color: #534728;
    width: 100px;
}

.element:last-child {
  margin-right: 0px
}

#logo {
    background-color: black;
    border-radius: 50%;
    height: 125px;
    width: auto;
}
.bot {
    background-color: black;
    color: gold;
    position: relative;
    top: -50px;
    height: 100px;
}
.bot p {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}

CSS

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.net>
    <defaultProxy enabled="true" useDefaultCredentials="true">
    </defaultProxy>
  </system.net>
 ... rest of the file
</configuration>

Answer 2

试试这个。根据渐变百分比调整顶部和底部黑色空间。

#banner {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    background-image: -webkit-linear-gradient(bottom, #000000 65%, #0000 35%);
    background-image: linear-gradient(bottom, #000000 65%, #0000 35%);
}

.element {
    margin-right: 2em;
    color: #534728;
    width: 100px;
}

.element:last-child {
  margin-right: 0px
}

#logo {
    height: 125px;
    width: auto;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    background: #000;
}

<div id="banner" class="banner-header">

	<a class="element" href="/">Home</a>
	<a class="element" href="/shop/">Shop</a>
	<a class="element" href="/our-story/">Our Story</a>
	<img id="logo" class="element" src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/new-logo.png" />
	<a class="element" href="/products/">Products</a>
	<a class="element" href="/contact-us/">Contact Us</a>
	<a class="element" href="/foundation/">Foundation</a>

</div>

Answer 3

没有flexbox的解决方案，并且完全可扩展：

与旧浏览器更好地兼容。
此解决方案不会剪切徽标。

Read this to understand how I maintain aspect ratio and make it fully scalable.

.header {position:relative; z-index:1; padding-top:15%;}

.header .navbar {position:absolute; top:0; bottom:60%; left:0; right:0; padding-top:3%; background:#ebeae6; line-height:0; font-family:"Tw Cen MT",sans-serif;}
.header .navbar .left {float:left; width:45%; text-align:right;}
.header .navbar .right {float:right; width:45%; text-align:left;}
.header .navbar a {text-decoration:none; color:#534728;}
.header .navbar a:hover, .header .navbar a:active {text-decoration:underline;}
.header .navbar .left a {margin-right:10%; font-size:1.7vw;}
.header .navbar .right a {margin-left:10%; font-size:1.7vw;}

.header .logobar {position:absolute; top:40%; bottom:0; left:0; right:0; background:#000;}
.header .logobar .logo {position:absolute; left:0; right:0; margin:0 auto;}
.header .logobar .logo.img {top:-60%; width:10%; padding-top:10%;}
.header .logobar .logo.txt {top:50%; height:50%; font-size:2.0vw; color:#bfaa5d;}
.header .logobar .logo > div {position:absolute; top:0; bottom:0; left:0; right:0; text-align:center;}
.header .logobar .logo.img > div {padding:5px 7px 5px 5px; border-radius:50%; background:#000;}
.header .logobar .logo > div img {width:100%; height:auto;}

<div class="header">
  <div class="navbar">
    <div class="left">
      <a href="/">Home</a>
      <a href="/shop/">Shop</a>
      <a href="/our-story/">Our Story</a>
    </div>
    <div class="right">
      <a href="/products/">Products</a>
      <a href="/contact-us/">Contact Us</a>
      <a href="/foundation/">Foundation</a>
    </div>
  </div>
  <div class="logobar">
    <div class="logo img"><div><img src="http://www.jamaicacannabisestates.com/wp-content/uploads/2018/03/new-logo.png" /></div></div>
    <div class="logo txt"><div>JAMAICA CANNABIS</div></div>
  </div>
</div>

codepen：https://codepen.io/anon/pen/XEpQGw?editors=1100
jsfiddle：https://jsfiddle.net/z0cLwkj0/10/

元素超过其他元素的CSS问题

3 个答案: