Flexbox box-shadow webkit [重复]答案

【问题标题】：Flexbox box-shadow webkit [duplicate]Flexbox box-shadow webkit [重复]
【发布时间】：2016-09-19 21:47:13
【问题描述】：

我尝试在我的导航栏上添加 box-shadow，看起来内容覆盖了它。

.value,
.icon,
.text,
.date {
  display: inline-flex;
  height: 50px;
}

.current {
	display: flex;
	justify-content: center;
	align-content: center;
	height: 50px;
	background: grey;
	box-shadow: 0 2px 3px #000;
    /* z-index doesn't help here */
    z-index: 9999;
}

.current h1 {
  margin: 5px 0;
  color: #eee;
  font-family: "Roboto", sans-serif;
}

.items {
	min-height: 50px;
	display: flex;
	flex-direction: column;
}

.item {
	height: 50px;
	background: #eee;
	border-bottom: 1px solid #aaa;
	display: flex;
}

.icon {
	width: 30px;
	min-width: 30px;
	justify-content: center;
	
}

.up {
	background: #F1F8E9;
}

.down {
	background: #FFEBEE;
}

.up > .icon {
	background: #8BC34A;
}

.down > .icon {
	background: #F44336;
}

.icon > span {
	font-size: 20px;
	height: 20px;
	align-self: center;
	color: #fff;
}

.value > span {
	align-self: center;
	font: 700 24px/24px "Roboto", sans-serif;
	padding: 0 15px;
}

.up > .value > span {
	color: #8BC34A;
}

.down > .value > span {
	color: #F44336;
}

.text {
	height: 50px;
}

.date {
	margin-left: auto;
}

.text > span {
	font: 500 16px/16px "Roboto", sans-serif;
	padding: 10px 0 0 5px;
}

.date > span {
	display: flex;
	font: 600 12px/12px "Roboto", sans-serif;
	padding: 0 5px 5px 0;
	height: 15px;
	align-self: flex-end;
}

<div id="current" class="current">
		<h1 id="pocket">Box-shadow</h1>
</div>
<div id="items" class="items">
  <div class="item up">
    <div class="icon">
      <span class="fa fa-arrow-up" aria-hidden="true"></span>
    </div>
    <div class="value">
      <span>250</span>
    </div>
    <div class="text">
      <span>First message</span>
    </div>
    <div class="date">
      <span>20.09.2016</span>
    </div>
  </div>
  <div class="item down">
    <div class="icon">
      <span class="fa fa-arrow-down" aria-hidden="true"></span>
    </div>
    <div class="value">
      <span>250</span>
    </div>
    <div class="text">
      <span>Second message</span>
    </div>
    <div class="date">
      <span>20.09.2016</span>
    </div>
  </div>
</div>

我也尝试了 z-index 元素上的 z-index 属性，但没有帮助。我的代码有错误还是应该使用某个属性？

【问题讨论】：

标签： html css

【解决方案1】：

要使z-index 工作，您需要定位，因此请将position: relative; 添加到您的.current

.value,
.icon,
.text,
.date {
  display: inline-flex;
  height: 50px;
}

.current {
	display: flex;
	justify-content: center;
	align-content: center;
	height: 50px;
	background: grey;
	box-shadow: 0 4px 6px #000;
  z-index: 2;
  position: relative;
}

.current h1 {
  margin: 5px 0;
  color: #eee;
  font-family: "Roboto", sans-serif;
}

.items {
	min-height: 50px;
	display: flex;
	flex-direction: column;
}

.item {
	height: 50px;
	background: #eee;
	border-bottom: 1px solid #aaa;
	display: flex;
}

.icon {
	width: 30px;
	min-width: 30px;
	justify-content: center;
	
}

.up {
	background: #F1F8E9;
}

.down {
	background: #FFEBEE;
}

.up > .icon {
	background: #8BC34A;
}

.down > .icon {
	background: #F44336;
}

.icon > span {
	font-size: 20px;
	height: 20px;
	align-self: center;
	color: #fff;
}

.value > span {
	align-self: center;
	font: 700 24px/24px "Roboto", sans-serif;
	padding: 0 15px;
}

.up > .value > span {
	color: #8BC34A;
}

.down > .value > span {
	color: #F44336;
}

.text {
	height: 50px;
}

.date {
	margin-left: auto;
}

.text > span {
	font: 500 16px/16px "Roboto", sans-serif;
	padding: 10px 0 0 5px;
}

.date > span {
	display: flex;
	font: 600 12px/12px "Roboto", sans-serif;
	padding: 0 5px 5px 0;
	height: 15px;
	align-self: flex-end;
}

<div id="current" class="current">
		<h1 id="pocket">Box-shadow</h1>
</div>
<div id="items" class="items">
  <div class="item up">
    <div class="icon">
      <span class="fa fa-arrow-up" aria-hidden="true"></span>
    </div>
    <div class="value">
      <span>250</span>
    </div>
    <div class="text">
      <span>First message</span>
    </div>
    <div class="date">
      <span>20.09.2016</span>
    </div>
  </div>
  <div class="item down">
    <div class="icon">
      <span class="fa fa-arrow-down" aria-hidden="true"></span>
    </div>
    <div class="value">
      <span>250</span>
    </div>
    <div class="text">
      <span>Second message</span>
    </div>
    <div class="date">
      <span>20.09.2016</span>
    </div>
  </div>
</div>

【讨论】：