将 DIV 堆叠在一起？

发布于 2024-08-14 08:09:44 字数 320 浏览 2 评论 0原文

是否可以堆叠多个 DIV，例如：

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

以便所有这些内部 DIV 具有相同的 X 和 Y 位置？默认情况下，它们都位于彼此下方，将 Y 位置增加了上一个 DIV 的高度。

我有一种感觉，某种浮动、展示或其他技巧可能会起作用？

编辑：父 DIV 具有相对位置，因此，使用绝对位置似乎不起作用。

原文

Is it possible to stack up multiple DIVs like:

<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

So that all those inner DIVs have the same X and Y position? By default they all go below each other increasing the Y position by the height of the last previous DIV.

I have a feeling some sort of float or display or other trick could bite?

EDIT: The parent DIV has position relative, so, using position absolute does not seem to work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪漫之都 2024-08-21 08:09:44

根据需要放置外部 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>

Position the outer div however you want, then position the inner divs using absolute. They'll all stack up.

.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>

回复收藏 0 原文

雨落星ぅ辰 2024-08-21 08:09:44

要添加到 Dave 的回答：

div { 
  position: relative; 
}
div div { 
  position: absolute; 
  top: 0; 
  left: 0; 
}

To add to Dave's answer:

div { 
  position: relative; 
}
div div { 
  position: absolute; 
  top: 0; 
  left: 0; 
}

回复收藏 0 原文

失去的东西太少 2024-08-21 08:09:44

您现在可以使用 CSS 网格来解决此问题。

<div class="outer">
  <div class="top"> top </div>
  <div class="below"> 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: 1;
  background-color: aqua;
}
.outer .top {
  z-index: 2;
  background-color: brown;
}

z-index 越低，级别越低。 z-index 最高的关卡位于前景。

You can now use CSS Grid to fix this.

<div class="outer">
  <div class="top"> top </div>
  <div class="below"> below </div>
</div>

And the css for this:

.outer {
  display: grid;
  grid-template: 1fr / 1fr;
  place-items: center;
}
.outer > * {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
}
.outer .below {
  z-index: 1;
  background-color: aqua;
}
.outer .top {
  z-index: 2;
  background-color: brown;
}

The lower the z-index, the lower the level. The level with the highest z-index is in the foreground.

回复收藏 0 原文

絕版丫頭 2024-08-21 08:09:44

我更喜欢 CSS 网格以获得更好的页面布局（absolute div 可以被页面中的其他 div 覆盖。）

.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;
}

<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>

如果您使用 CSS 隐藏紫色 div，您会看到蓝色 div 位于顶部。

这是一个有效的链接

I'd prefer CSS grid for a better page layout (absolute divs can be overridden by other divs in the page.)

.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;
}

<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>

If you hide the purple div with CSS, you'll see the blue div is at the top.

Here's a working link

回复收藏 0 原文

手心的温暖 2024-08-21 08:09:44

如果您的意思是将一个放在另一个的顶部，一个放在顶部（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>

这应该显示 4 在 3 的顶部，3 在 2 的顶部，依此类推。 z 索引越高，元素在 z 轴上的位置就越高。我希望这对你有帮助:)

If you mean by literally putting one on the top of the other, one on the top (Same X, Y positions, but different Z position), try using the z-index CSS attribute. This should work (untested)

<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>

This should show 4 on the top of 3, 3 on the top of 2, and so on. The higher the z-index is, the higher the element is positioned on the z-axis. I hope this helped you :)

回复收藏 0 原文

拥醉 2024-08-21 08:09:44

风格=“位置：绝对”

回复收藏 0 原文

无所的.畏惧 2024-08-21 08:09:44

我将 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;
}

https://codepen.io/anon/pen/EXxKzP

I positioned the divs slightly offset, so that you can see it at work.
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;
}

https://codepen.io/anon/pen/EXxKzP

回复收藏 0 原文

水染的天色ゝ 2024-08-21 08:09:44

提供 position:absolute 的答案现在已经过时了。

在当前支持的浏览器中，使用 CSS 网格更容易实现相同的效果。这将确保元素仍然是页面布局的一部分（使用 position:absolute 产生的问题。

这是一篇博客文章，解释如何实现此目的：https://zelig880.com/how-to-stack -two-elements-on-top-of-each-other-without-using-position-absolute

这是一个带有实例的 codepen：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>

The answer that provides position:absolute is now outdated.

In currently supported browsers, it is much easier to achieve the same using CSS grid. This will ensure that the elements are still part of the page layout (issue produced with position:absolute.

This is a blog post explaining how to achieve this: https://zelig880.com/how-to-stack-two-elements-on-top-of-each-other-without-using-position-absolute

And this is a codepen with a live example:https://codepen.io/zelig880/pen/oNdZWNa

Quick code:

.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>

回复收藏 0 原文

多像笑话 2024-08-21 08:09:44

我有同样的要求，我在下面的小提琴中尝试过。

#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;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview

I had the same requirement which I have tried in below fiddle.

#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;
}

https://plnkr.co/edit/XnlneRFlvo1pB92UXCC6?p=preview

回复收藏 0 原文

明月松间行 2024-08-21 08:09:44

我知道这篇文章有点旧，但我遇到了同样的问题，并尝试修复它几个小时。最后我找到了解决方案：

如果我们有 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>

对我来说效果很好。

I know that this post is a little old but I had the same problem and tried to fix it several hours. Finally I found the solution:

if we have 2 boxes positioned absolue

<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>

we do expect that there will be one box on the screen. To do that we must set margin-bottom equal to -height, so doing like this:

<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>

works fine for me.

回复收藏 0 原文

夏末的微笑 2024-08-21 08:09:44

如果您遇到与影响其他元素位置相关的问题，您可以这样做。

<div class="container">
  <div>Div 1</div>
  <div>Div 2 on top of div 1</div>
  <div>Div 3 on top of div 1 and 2</div>
</div>

<style type="text/css">
  .container {
    /* to align absolute children to relative parent */
    position: relative;
  }
  .container > div {
    /* no need for z-index, the lower div will be higher 
       use z-index if you want a specific div to be on top of others */
    position: absolute;
  }
</style>

David Antoon

If you have issues related to affecting other elements' positions you can do it like this.

<div class="container">
  <div>Div 1</div>
  <div>Div 2 on top of div 1</div>
  <div>Div 3 on top of div 1 and 2</div>
</div>

<style type="text/css">
  .container {
    /* to align absolute children to relative parent */
    position: relative;
  }
  .container > div {
    /* no need for z-index, the lower div will be higher 
       use z-index if you want a specific div to be on top of others */
    position: absolute;
  }
</style>

David Antoon

回复收藏 0 原文

~没有更多了~