css子绝父相的层级设置

我们在写页面的时候经常会用到子绝父相来定位，但定位后的效果一般都是绝对定位的子元素覆盖在相对定位的父元素上，如果我们想改变覆盖的顺序可以使用 **z-index **来重新设置层级。一般将绝对定位的元素的z-index设置为-1即可。

html代码：

// 相对定位：专属礼品span元素；绝对定位：黄色背景条i元素
 <div class="answer-tip">凡报名参与并在初赛阶段提交答案的同学，有机会获得我们竞赛定制的
 	<span class="bold"> 专属礼品 <i></i></span>哦！
 </div>

css代码：

// 将黄条也就是i元素的z-index设置为-1
.answer-tip .bold{
	font-size: 20px;
	font-weight:700;
	position:relative;
	z-index:1;
	}
.answer-tip .bold i{
	position:absolute;
	width:80px;
	height:20px;
	background-color: yellow;
	top:12px;
	left:6px;
	z-index:-1;
	}

效果：