使用z-index将div置于另一个div之上
我希望在div1上面div2。我尝试使用，z-index但不起作用。
我已经试过这段代码：
div {
width: 100px;
height: 100px;
}
.div1 {
background: red;
z-index: 1;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 2
}
<div class="div1"></div>
<div class="div2"></div>
问题答案：
您可以同时添加position: relative到div和创建stackingcontext
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
z-index: 2;
position: relative;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 1;
position: relative;
}
<div class="div1"></div>
<div class="div2"></div>
或者您可以使用transform-style: preserve-3d;，现在.div1应该将其放置在 3D空间中， 而不要在平面中展平。
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
z-index: 2;
transform-style: preserve-3d;
}
.div2 {
background: blue;
margin-top: -15vh;
z-index: 1;
}
<div class="div1"></div>
<div class="div2"></div>
您也可以使用一些随机的transform像translate或rotate
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
z-index: 2;
transform: translate(1px);
}
.div2 {
background: blue;
transform: translate(1px, -15vh);
z-index: 1;
}
<div class="div1"></div>
<div class="div2"></div>
Filters也可以，但是它们不好 Support
div {
width:100px;
height: 100px;
}
.div1 {
background: red;
filter: brightness(0.4);
z-index: 2;
}
.div2 {
background: blue;
margin-top: -15vh;
filter: brightness(0.4);
z-index: 1;
}
<div class="div1"></div>
<div class="div2"></div>
-
问题内容： 我搜索了其他问题，尽管这个问题似乎与其他几个问题相似，但到目前为止，我所看到的任何问题似乎都无法解决我遇到的问题。 我有一个div，其中包含许多其他div，每个div都向左浮动。这些div分别包含照片和标题。我要的是使照片组位于包含div的中心。 从下面的代码中可以看到，我已经尝试在父div上同时使用和，并且还在照片后添加了（如另一个主题中所述）。似乎没有什么改变。 谢谢。我感谢任何建
-
在这段代码中，我试图将一个导航栏(content1)覆盖在另一个导航栏（content）之上，但似乎什么都不起作用。我做错了什么？即使我可以使其覆盖，它们也不是以容器为中心放置的。 null null 只是想知道如何将我的导航条覆盖在另一个导航条之上并使其在容器中居中,
-
问题内容： 在将一个人叠加到另一个人上时，我需要帮助。 我的代码如下所示： 不幸的是，我不能将或嵌套在第一个内部。 如图所示，它必须是两个单独的，但是我需要知道如何将放置在上方和最右侧，并以的顶部为中心。 问题答案： 我建议使用来了解和子元素。
-
问题内容： 我想将添加到另一个div内的div居中。 这是我当前正在使用的CSS。 如您所见，我现在使用的方法取决于width和height的值。如果width / height发生变化，我将不得不修改and值。是否有任何通用解决方案可用于始终将居中对齐它的大小？ 我发现使用可以将innerDiv水平分配到中间，但是垂直分配中间呢？ 问题答案： tl; dr 垂直对齐中间作品，但是您将不得不在父元
-
我的情况是： 所以我尝试通过单击另一个div来切换侧栏。它是一个100%高度的边栏，固定在视区的右侧。本质上，我试图将一个300px的div包装在50px宽的切换div和250px宽的侧边栏div周围，并且我想用一个负的右边距像素值来隐藏侧边栏部分。使用.toggle：active选择器（所以当单击toggle div时会发生这种情况），我想通过将边距右的像素值设置回0px来显示侧栏部分。 到目前
-
问题内容： 我是角度新手:-)我只是想将一个div的尺寸设置为另一个，请给予任何帮助。 在控制器中，我添加了： 返回宽度和高度，但未应用 问题答案： 我已经为您的问题创建了解决方案。首先，我将向您解释我做了什么以及为什么这样做。 Angular中的一项基本准则是，应避免在控制器中处理div等DOM元素，而应在指令中执行与DOM元素有关的大多数操作。 指令允许您将功能绑定到特定的dom元素。在这种情