英文:
How can I position an element on top of another while retaining document flow?
问题
我有一个例子，我正在使用绝对定位将一个黑色的 div 叠加在一个红色的 div 上面。然后还有更多的内容。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
p {
position: relative;
z-index: 10;
}
.wrapper {
position: relative;
}
#red {
height: 300px;
width: 300px;
background-color: red;
position: absolute;
z-index: 0;
}
#black {
height: 200px;
width: 200px;
background-color: black;
position: relative;
z-index: 4;
}
<!-- language: lang-html -->
<div class="wrapper">
<p>Hello</p>
<div id="red"></div>
<div id="black"></div>
<p>World</p>
</div>
<!-- end snippet -->
我如何使 World 出现在红色 div 下面，并与 DOM 的其余部分一起流动，同时保留堆叠的 div 的位置。
期望的结果：
解决方案必须使用常规的 DOM 流来实现。即，将 World 设置为 position: absolute 并手动放置在正确的位置不是我想要的。最好也不使用 JavaScript。
这个问题的关键是我不知道如何在不使用 position: absolute 的情况下堆叠元素，因为它会将元素从 DOM 流中移出。但也许有一种更好的方法来堆叠元素。
英文:
I have an example where I'm stacking a black div on top of a red div using position absolute. Then more content follows.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
p {
position: relative;
z-index; 10
}
.wrapper {
position: relative;
}
#red {
height: 300px;
width: 300px;
background-color: red;
position: absolute;
z-index: 0;
}
#black {
height: 200px;
width: 200px;
background-color: black;
position: relative;
z-index: 4;
}
<!-- language: lang-html -->
<div class="wrapper">
<p>Hello</p>
<div id="red"></div>
<div id="black"></div>
<p>World</p>
</div>
<!-- end snippet -->
How can I make it so World appears below the red div in flow with the rest of the DOM while retaining the stacked divs as they are.
Desired outcome:
The solution must use the regular DOM flow to achieve this. I.e. setting World to position: absolute and manually placing it in the right place is not what I want. Also preferably no JS used.
The crux of this issue is that I don't know how to stack elements without using position: absolute which takes the elements outside the DOM flow. But perhaps there is a better way to stack elements.
答案1
得分: 1
我觉得这个可能太简单了，可能不是你要找的。但是我去掉了所有的定位，并把黑色方块放在了红色方块里面。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#red {
height: 300px;
width: 300px;
background-color: red;
}
#black {
height: 200px;
width: 200px;
background-color: black;
}
<!-- language: lang-html -->
<div class="wrapper">
<p>Hello</p>
<div id="red">
<div id="black"></div>
</div>
<p>World</p>
</div>
<!-- end snippet -->
英文:
I get the feeling this is too simple and may not be what you are looking for. But I got rid of all of the positioning and put the black square inside the red.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#red {
height: 300px;
width: 300px;
background-color: red;
}
#black {
height: 200px;
width: 200px;
background-color: black;
}
<!-- language: lang-html -->
<div class="wrapper">
<p>Hello</p>
<div id="red">
<div id="black"></div>
</div>
<p>World</p>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论