相対的位置付けが不透明を除去するのはなぜですか？

Question

バックグラウンドに0.3不透明度の画像があり、背景色もあるシンプルなサイトを作った。その上に何かテキストがあります。ここにHTMLがあります：

私が相対的な位置にすると、テキストは画像の不透明度には影響されません。それを相対的にしないと、不透明度の影響を受けます。私はなぜ相対的な位置付けがそのような効果を持っているのだろうと思っています。あなたが見ている何

.bg-1 { 
 
    width: 100%; 
 
    height: 80vh; 
 
    background: url(img/keyboard.jpg) no-repeat center center; 
 
    background-position: top; 
 
    background-size: cover; 
 
    opacity: .3; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 

 
#welcome { 
 
    padding-top: 15px; 
 
    color: #66FCF1; 
 
    z-index: 1; 
 
    position: relative; 
 
    /*this is the point of concern*/ 
 
} 
 

 
.first { 
 
    width: 100%; 
 
    height: 80vh; 
 
    background-color: black; 
 
}

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container-fluid first text-center"> 
 
    <div id="welcome"> 
 
    <p class="welcomeSize">Welcome!</p> 
 
    </div> 
 
    <div class="bg-1"> 
 
    <!--the bg image with opacity--> 
 
    </div> 
 
</div>

Answer 1

はz-indexです。 #welcomeに既にz-indexがある場合でも、z-indexの要素にstaticpositionを追加するまで、z-indexプロパティは有効になりません。したがって、position: relativeを追加すると#welcomeにz-indexが有効になり、#welcomeをその後ろにではなく.bg-1の上に置きます。

Answer 2

デフォルトでは、エレメントはhtmlで指定された順序でロードされます。この場合、.bg-1要素は、の後にの後に（つまり上に）#welcome要素を読み込みます。

同様に、z-index is only applied to positioned elements（すなわち、fixed,およびabsolute）。 position:relativeを適用すると、z-indexが適用され、#welcome要素を「持ち上げる」と表示されます。を超えると背景画像