我有两个具有绝对定位的重叠背景,我正在尝试将它们设置为使它们重叠并且一个在另一个之上。这是我到目前为止写的CSS。
.answered {
position: absolute;
top: 0;
}
.asked {
position: absolute;
top: 0;
}
h1{
display: block;
position: relative;
width: 120px;
border-radius: 5px 5px 0px 0px;
border: 1px solid black;
}
.in-back {
display: block;
background: grey;
z-index: -1;
}
.in-front {
display: block;
z-index: 1;
background: tan;
}
<section class="history">
<div class="asked">
<h1 class="user-show-tab-title in-front">Questions</h1>
<div>
<ul class="question-index-false in-front">
<li>
<a class="question" href="http://localhost:3000/#questions/1">what train runs faster from wycoff?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/5">What is the history of the Block Island Ferry?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/78">What are the major human features in New York City?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/199">How much do greyhound bus tickets from California to Phoenix Arizona?</a>
</li>
</ul>
</div>
</div>
<div class="answered">
<h1 class="user-show-tab-title in-back">Answers</h1>
<div>
<ul class="question-index-false in-back">
<li>
<a class="question" href="http://localhost:3000/#questions/129">What is the state bird of New York?</a>
</li>
</ul>
</div>
</div>
</section>
即使其z-index较低,灰色仍会出现在棕褐色的顶部。我不明白为什么。
答案 0 :(得分:3)
元素不位于绝对位置,只有父级 .asked
和.answered
。子元素不继承position
属性。 <ul>
都有默认position: static;
,除非您为position
属性指定不同的值,否则始终会应用默认值position: relative;
。因此,添加.answered {
position: absolute;
top: 0;
}
.asked {
position: absolute;
top: 0;
}
h1 {
display: block;
position: relative;
width: 120px;
border-radius: 5px 5px 0px 0px;
border: 1px solid black;
}
.in-back {
display: block;
background: grey;
position: relative;
z-index: -1;
}
.in-front {
display: block;
z-index: 1;
position: relative;
background: tan;
}
会使您的z-index方式按预期方式工作。
<section class="history">
<div class="asked">
<h1 class="user-show-tab-title in-front">Questions</h1>
<div>
<ul class="question-index-false in-front">
<li>
<a class="question" href="http://localhost:3000/#questions/1">what train runs faster from wycoff?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/5">What is the history of the Block Island Ferry?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/78">What are the major human features in New York City?</a>
</li>
<li>
<a class="question" href="http://localhost:3000/#questions/199">How much do greyhound bus tickets from California to Phoenix Arizona?</a>
</li>
</ul>
</div>
</div>
<div class="answered">
<h1 class="user-show-tab-title in-back">Answers</h1>
<div>
<ul class="question-index-false in-back">
<li>
<a class="question" href="http://localhost:3000/#questions/129">What is the state bird of New York?</a>
</li>
</ul>
</div>
</div>
</section>
unsigned