2つのdivブロックz-インデックス

Question

2つのdivブロックがあります。最初のものはz-index: 0、もう1つはz-index: -1です。ブロック内のすべての上にテキストを表示するにはz-index: -1です。私はテキストスタイルcursor: pointerを入れました。

.first-block image as pizza { 
    display: inline-block; 
    position: relative; 
    z-index: 700; 
} 

#second block when circle has some text { 
    position: absolute; 
    top: -15%; 
    right: -20%; 
    z-index: -1; 
} 

#text div { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
    text-align: center; 
    display: inline-block; 
} 

Answer 1

私はよくあなたの要求を理解していれば、あなたは似た何かをやろうとしなければなりません。 質問にHTMLコードとCSSコードを投稿すると、より良いお手伝いをすることができます。 :)

/*image as pizza*/ 
.first-block { 
    display: inline-block; 
    position: relative; 
    z-index: 700; 
} 

/*block when circle has some text*/ 
#second { 
    position: absolute; 
    top: -15%; 
    right: -20%; 
    /*z-index: -1;I suggest you to remove this one, as it would be under the pizza anyway, because pizza have z-index 700.*/ 
} 

/*div*/ 
#text { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 90%; 
    text-align: center; 
    display: inline-block; 
    z-index: 701; /*And add here(The DIV in which your text is nested) the z-index*/ 
} 

EDIT：

<div class="first-block">img of pizza under the text but over the circle.<div> 
<div id="second"> <!--This is the circle divin which the text is nested.--> 
    <div id="text"> 
    SOME TEXT OVER THE PIZZA'S IMAGE. 
    </div> 
<div>