Im having issues in running my code , css please help me : 


	<style>
	*{	z-index: 1;	}
    body 
    {	margin: 0;}
    #product
    {
	height: 35em;
	background: #000;
	color: #fff;
    }
    #product ul
    {	padding: 0;   }
    #product ul li 
    {
	height: 35em;
	width: 25%;
	float:left;
	background-color: red;
	position: relative;
     }
    #product p 
    {
	position: relative;
	top: 40%;
	z-index: 15;
    }
    #product h1
    {	text-align: center;}
    #pos 
    {	
	 position: absolute;
	 z-index: 3;
	 background-color:rgba(0, 0, 0,1);
    }
    #ovrl 
    {
	background: rgba(0, 0, 0, .5);
	height: 35em;
	width: 100%;
	position: absolute;
	z-index: 2;
    }
	</style>
    </head>
     <body>
		<div id="product">
		<div id = "pos">
			<h1>Why Choose Us</h1>
			<hr>
		</div>
		<ul>
		<li ><p>Customized<br>Software</p></li>
		<li><p>Workshop</p></li>
		<li><p>Digital<br>Advertising</p></li>
		<li><p>E-learning</p</li>
		</ul>
	<div id="ovrl"></div>
	</div>
     </body>

when i remove the code 

     #product ul li{
       position : realtive;
        }

then text is fully white but when it;s present in the code text is not white.

And another problem when i ONLY remove 

     *{
       z-index :1;
      }
then also it works fine.
But i cannot understand why.
i need help please anyone solve my problem .