有没有办法改变3个HTML元素的显示顺序(即，彼此之间有权重)

Question

我有3个"p〃；元素，我想知道是否有一种方法可以改变页面用JS或CSS加载它们的顺序。下面是我尝试过的一份附件。正如你所看到的，当你点击标记为"；大约1〃；当它打开它并显示下面其他框的小框时，您可以单击它们。这就是我希望发生在他们所有人身上的事情。因此，基本上我希望当我点击一个框时，HTML加载框的顺序会发生变化。即，当我点击框2时，HTML元素新闻/更新/公告将移动到关于1和大约2上方，这样当我点击它时，结果是框打开，您可以在底部看到这两个链接。

我希望有人能帮我，因为我完全陷入困境了。

谢谢！

(所以基本上，当你点击关于1所有框时会发生什么！(

body {
background-color: #000080;
overflow: hidden;
}
.box1 {
background-color: #fff;
position: absolute;
bottom: -530px;
left: 50px;
height: 585px;
width: 100px;
border-radius: 10px;
transition: all 0.8s;
font-family: Calibri;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
font-size: 20px;
}
.box1:focus {
bottom: -10px;
left: 35px;
width: 500px;
background-color: #dfff00;
}
.box2 {
background-color: #fff;
position: absolute;
bottom: -530px;
left: 225px;
height: 585px;
width: 125px;
border-radius: 10px;
transition: all 0.8s;
font-family: Calibri;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
font-size: 20px;
}
.box2:focus {
bottom: -10px;
left: 35px;
width: 500px;
}
.box3 {
background-color: #fff;
position: absolute;
bottom: -530px;
left: 400px;
height: 585px;
width: 100px;
border-radius: 10px;
transition: all 0.8s;
font-family: Calibri;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
font-size: 20px;
}
.box3:focus {
bottom: -10px;
left: 35px;
width: 500px;
background-color: #dfff00;
}
.boxTitle {
display: block;
text-align: center;
font-size: 25px;
}

<p tabindex="0" class="box1">
<span class="boxTitle"><b><u>About 1</u></b></span>
</p>
<p tabindex="0" class="box3">
<span class="boxTitle"><b><u>About 2</u></b></span>
</p>

<p tabindex="0" class="box2">
<span class="boxTitle"><b><u>News / Updates / Anouncements</u></b></span>
</p>

Answer 1

您可以使用z-index执行此操作。

在body标记上设置一个z-index，然后为每个框添加一个默认的z-index。我在每个框中添加了一个通用的box类，以设置基本样式。然后在focus上，将z-index设置为低于基本z-index。

body {
background-color: #000080;
overflow: hidden;
z-index: 1;
}
.box {
z-index: 3;
/* common to all boxes */
background-color: #fff;
position: absolute;
height: 585px;
bottom: -530px;
border-radius: 10px;
transition: all 0.8s;
font-family: Calibri;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
font-size: 20px;
}
.box:focus {
z-index: 2;
/* These are common to all boxes */
bottom: -10px;
left: 35px;
width: 500px;
}
.box1 {
left: 50px;
width: 100px;

}
.box1:focus {
background-color: #dfff00;
}
.box2 {
left: 225px;
width: 125px;
}
.box3 {
left: 400px;
width: 100px;
}
.box3:focus {
background-color: #dfff00;
}
.boxTitle {
display: block;
text-align: center;
font-size: 25px;
}

<p tabindex="0" class="box1 box">
<span class="boxTitle"><b><u>About 1</u></b></span>
</p>
<p tabindex="0" class="box3 box">
<span class="boxTitle"><b><u>About 2</u></b></span>
</p>
<p tabindex="0" class="box2 box">
<span class="boxTitle"><b><u>News / Updates / Anouncements</u></b></span>
</p>

Answer 2

我认为您不需要任何js。在每个:focus中添加z-index: -1;。当注意力集中时，这应该会将元素推到另一个元素后面。

Answer 3

只需要确保单击的框位于其他两个框之后。

此外，不需要重复只因一个属性不同的CSS类。相反，设置一个具有所有公共属性的类，并将该类应用于每个"类"；框"；。仅为每个项目不同的属性设置单独的类。

let boxes = document.querySelectorAll("p");
// Loop over each of the paragraph boxes
boxes.forEach(function(box){
// Add a click event handler
box.addEventListener("click", function(){
// Loop over all the boxes again
boxes.forEach(function(b){
// give all the boxes a high z-index
// so that they are all layered on top of everything else
b.style.zIndex = 100;
});
// Give the clicked box a low z-index so that it
// goes behind the other boxes
this.style.zIndex = -100;
}); 
});

body {
background-color: #000080;
overflow: hidden;
}
/* All of the following applies to each box so
just set up a class that each will use instead
of making 3 classes that only differ by one thing */
.box {
background-color: #fff;
position: absolute;
bottom: -530px;
height: 585px;
width: 100px;
border-radius: 10px;
transition: all 0.8s;
font-family: Calibri;
padding-right: 15px;
padding-left: 15px;
padding-top: 5px;
font-size: 20px;
}
/* Same here */
.box:focus {
bottom: -10px;
left: 35px;
width: 500px;
background-color: #dfff00;
}
/* Then, set up separate classes for what is different
for each one. */
.box1 { left:50px;   }
.box2 { left: 225px; }
.box3 { left: 400px; }
.boxTitle {
display: block;
text-align: center;
font-size: 25px;
}

<p tabindex="0" class="box box1">
<span class="boxTitle"><b><u>About 1</u></b></span>
</p>
<p tabindex="0" class="box box3">
<span class="boxTitle"><b><u>About 2</u></b></span>
</p>
<p tabindex="0" class="box box2">
<span class="boxTitle"><b><u>News / Updates / Anouncements</u></b></span>
</p>