Как сделать так, чтобы текст отображался поверх затемненного слоя?

Question

[klaus hayssler]

Есть тень под классом mask, которая затемняет изображение. Картинка и тень на хедере, как мне писать последующий текст выше этой тени, потому как получается, что тень загораживает не только изображение, но и текст. Заранее огромное спасибо.

<header class="mask">
		<div class="container">
			<div class="navbar">
				<a href="#" class="logo">Bobby</a>
				<span class="ms"></span>
			</div>		
	
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ipsam possimus, ipsa vitae minima suscipit, repellat ab excepturi laboriosam atque illum, accusantium saepe, distinctio perferendis nulla quos qui asperiores nemo.</p>
		</div>
	</header>

// основные стили страницы
html, body
	width: 100%
	height: 100%

*:before, *:after
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

.container
	min-wdith: 1200px
	margin 0 auto

// HEADER
header
	background: url(../img/header.jpg)
	background-size: cover
	min-width: 100%
	min-height: 100%
	position: relative

.mask
	position: relative
	&:after
		content: ''
		position: absolute
		left: 0
		top: 0
		width: 100%
		height: 100%
		background-color: rgba(0,0,0,0.5)

p
	color: #fff

Answer 1

[Svidrigaylow]

По ссылке теория с примерами - htmlbook.ru/css/z-index

Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.