[英]Stacking DIVs on top of each other?
是否可以堆叠多个 DIV,例如:
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
这样所有这些内部 DIV 都具有相同的 X 和 Y position? 默认情况下,它们都是 go 在彼此下方,将 Y position 增加上一个 DIV 的高度。
我觉得某种浮动或展示或其他技巧可能会咬人?
编辑:父 DIV 具有 position 相对值,因此,使用 position 绝对值似乎不起作用。
根据需要定位外部 div,然后使用绝对值定位内部 div。 他们都会堆积起来。
.inner { position: absolute; }
<div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> </div>
添加到戴夫的答案:
div { position: relative; }
div div { position: absolute; top: 0; left: 0; }
您现在可以使用 CSS Grid 来解决此问题。
<div class="outer">
<div class="top"> </div>
<div class="below"> </div>
</div>
以及用于此的 css:
.outer {
display: grid;
grid-template: 1fr / 1fr;
place-items: center;
}
.outer > * {
grid-column: 1 / 1;
grid-row: 1 / 1;
}
.outer .below {
z-index: 2;
}
.outer .top {
z-index: 1;
}
如果您的意思是将一个放在另一个的顶部,一个在顶部(相同的 X、Y 位置,但不同的 Z 位置),请尝试使用z-index
CSS 属性。 这应该有效(未经测试)
<div>
<div style='z-index: 1'>1</div>
<div style='z-index: 2'>2</div>
<div style='z-index: 3'>3</div>
<div style='z-index: 4'>4</div>
</div>
这应该在 3 的顶部显示 4,在 2 的顶部显示 3,依此类推。 z-index 越高,元素在 z 轴上的位置就越高。 我希望这对你有帮助:)
所有的答案似乎都很旧:) 我更喜欢 CSS 网格以获得更好的页面布局( absolute
div 可以被页面中的其他 div 覆盖。)
<div class="container">
<div class="inner" style="background-color: white;"></div>
<div class="inner" style="background-color: red;"></div>
<div class="inner" style="background-color: green;"></div>
<div class="inner" style="background-color: blue;"></div>
<div class="inner" style="background-color: purple;"></div>
</div>
<style>
.container {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: yellow;
/* important part */
display: grid;
place-items: center;
grid-template-areas:
"inner-div";
}
.inner {
height: 100px;
width: 100px;
/* important part */
grid-area: inner-div;
}
</style>
如果您使用 CSS 隐藏紫色 div,您将看到蓝色 div 位于顶部。
这是一个工作链接
style="position:absolute"
我将 div 位置稍微偏移,以便您可以在工作中看到它。
HTML
<div class="outer">
<div class="bot">BOT</div>
<div class="top">TOP</div>
</div>
CSS
.outer {
position: relative;
margin-top: 20px;
}
.top {
position: absolute;
margin-top: -10px;
background-color: green;
}
.bot {
position: absolute;
background-color: yellow;
}
我有相同的要求,我在下面的小提琴中尝试过。
#container1 {
background-color:red;
position:absolute;
left:0;
top:0;
height:230px;
width:300px;
z-index:2;
}
#container2 {
background-color:blue;
position:absolute;
left:0;
top:0;
height:300px;
width:300px;
z-index:1;
}
#container {
position : relative;
height:350px;
width:350px;
background-color:yellow;
}
我知道这篇文章有点旧,但我遇到了同样的问题并试图修复它几个小时。 最后我找到了解决方案:
如果我们有 2 个绝对定位的盒子
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px;'></div>
我们确实希望屏幕上有一个盒子。 为此,我们必须将 margin-bottom 设置为等于 -height,这样做:
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
<div style='left: 100px; top: 100px; position: absolute; width: 200px; height: 200px; margin-bottom: -200px;'></div>
对我来说很好用。
如果您使用纯 html、js、css,那么这个答案对您没有帮助,但如果您也在使用 PHP 并动态生成内部元素,那么您可能已经有一个 foreach 循环来创建内部元素。
$top = 0; // Initialise top
foreach ($array as $value) {
echo '<div style="height:25px;top:${top}px;" class="positioned-absolute">Stack Me</div>'; // apply top to element
$top = $top + 32; // increase value of top.
}
unset($top);
我知道在涉及 CSS 的地方通常不赞成内联样式。
在我看来,另一种选择是为每个内部添加一个独特的类,并增加最高值,我认为从长远来看这是不可管理的。 当然,如果您有一小组永远不会改变的元素,那么是的,唯一的类添加会起作用。
提供position:absolute
的答案现已过时。
在当前支持的浏览器中,使用 CSS 网格更容易实现相同的目标。 这将确保元素仍然是页面布局的一部分(使用position:absolute
产生的问题。
这是一篇解释如何实现此目的的博客文章: https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute
这是一个带有实时示例的代码笔: https://codepen.io/zelig880/pen/oNdZWNa
快速代码:
.container_row{ display: grid; }.layer1, .layer2{ grid-column: 1; grid-row: 1; }.layer1{ color: blue; background: red; animation-direction: reverse; }.layer2{ color: white; background: blue; }.layer1, .layer2 { animation-name: fade; animation-duration: 10s; } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }
<div class="container_row"> <div class="layer1"> I am the layer behind </div> <div class="layer2"> I am actually on top </div> </div> <div class="container_row"> Yuppi: This line is positioned successfully! This would not have been the case with position:absolute </div>
如果您有与影响其他元素位置相关的问题,您可以这样做。
<div class="container">
<div class="behind">1</div>
<div class="front">2</div>
</div>
<style>
.front {
position: absolute;
top: 20vh;
z-index: 2;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.