位置またはZ-インデックス属性を削除するとテキストの色が変わります

Question

以下の順序付けられていないリストの箇条書きは灰色で表示されますが、それらを白にします。

* { 
 
    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; 
 
}

<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>

Iは#product ul liセレクタからposition: relativeを削除すると、テキストが完全に白色であるが、それはコードテキストで存在だときに白ではありません。

さらに、z-index: 1を*セレクタから削除すると、別の問題が発生し、正常に動作します。

しかし、私はなぜそれを理解できません。私は誰も私の問題を解決してください助けが必要です。

Answer 1

あなたは#productのUL李のタイプミスを持っているまず第一に、この試してみてください。*の代わりに使用するのでは、また

#product ul li { 
    position: relative; 
} 

を、あなたは全体のDOMに適用される何かをしたい場合は、htmlタグを使用します

html { 
    z-index: 1; 
} 

今後、CSSでIdを使用しないようにしてください.JavaScriptのCSSやIdにクラスを使用することは一般的には良い方法です。