Essentially, my goal is to display the <article id="characters"> above the <article id="accordion">. However, despite my efforts, the characters article appears below the accordion article instead of on top or even behind it.
Where did I go wrong?
#appchap {
display: block;
position: relative;
z-index: 100;
overflow-x: hidden;
overflow-y: auto;
}
article#accordion {
display: block;
position: relative;
z-index: -1;
}
article#accordion section {
display: block;
position: relative;
height: 25px;
background-color: blue;
z-index: -1;
}
article#characters {
display: block;
position: relative;
z-index: 1;
}
article#characters section {
display: block;
position: relative;
height: 25px;
z-index: 1;
background-color: red;
}<div id="appchap">
<article id="accordion">
<section>number 1</section>
<section>number 2</section>
</article>
<article id="characters">
<section>Main characters</section>
</article>
</div>