相对位置的 div 元素不会堆叠答案

【问题标题】：Div elements in position relative will not stack相对位置的 div 元素不会堆叠
【发布时间】：2020-11-06 05:59:28
【问题描述】：

总之，我创建了一个位置为：relative 的容器 div（父级），然后添加了 3 个位置为：absolute 的子 div。我现在正在尝试在所有这些之下添加另一个 div，即网站的下一部分。但是现在下一个 div 出现在第一个主要的“父”div 下。从在这里和谷歌的无尽搜索中，我虽然具有相对位置的主 div 不会破坏流程，但显然它确实这样做了，否则我不会发布。

我现在想在父级之外创建另一个 div，这样它就可以放在第一个 div 下，并创建一个漂亮的、有争议的网站。请查看我的 CSS 并帮助我理解为什么相对元素中的绝对元素会扰乱流程。（我是 CSS 新手，因此感谢任何专业提示！）

Here is an image of the website so you get a feel

*{
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: 'Noto Sans HK', sans-serif;
}

/* Arranging the parent and child elements so 
images can overlap */

.child {
    top: 0;
}
.child-1 {
    position: absolute;
    left: 0;
    z-index: 100;
}

.child-2 {
    position: absolute;
    right: 0;
    z-index: 1;
}

.child-3 {
    position: absolute;
    padding-top: 38%;
    left: 0;
    
}
#parent {
    position: relative;
    height: auto;
    
}

.hero-text {
    position: absolute;
    text-align: center;
    right: 10vw;
    top: 28vw;
    z-index: 9;
    font-size: 3.5vw;
    float: right;
    color: white;
}

/* Responsive viewport area, 
Logo resize based on the screen size */

#logo_png {
    max-width: 25vw;
}

#hero_img {
    max-width: 85vw;
    
}

#green_circle_png {
    max-width: 40vw;
}

/* NAV BAR STYLING */

#container {

    position: absolute;
    z-index: 900;
    width: 95%;
    margin: 0 auto;
    
}


nav {
    float: right;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 5vw;   /* margin-left obly touches the left margin, not L & R */
    padding-top: 25px;

    position: relative;
}

nav a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.4vw;
}

nav a:hover {
    color: black;
}



.p1 {
    color: #f5f7ff;
    font-size: 10vw;
}
#test {
    position: relative;
}

<body>

    
    
    <div id="parent">

            <div class="child child-1">
                <h1>
                    <a href='THIS WILL BE LINK TO HOME PAGE'>
                        <img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists"/>
                
                    </a>
                </h1>
            </div>

            <div class="child child-2">
                <h1>
                    <img id="hero_img" src="Images/circle_hands_lbsphoto.png" alt="Little Big Scientists"/>
                </h1>
            </div>

            <div class="child child-3">
                <h1>
                    <img id="green_circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists"/>
                </h1>
            </div>

            <div class="hero-text">
                <p>We’re on a mission to teach,
                    <br>guide, and empower the next
                    <br> generation of scientists
                </p>
            </div>

            <!-- Div for Nav Bar-->
            <div id="container"> 

                <nav>
                    <ul>
                        <li><a href="#">Mission</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Donate</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
        
            </div>

    </div>
    

    
    <div id="test">
            <h2 class="p1">Inspiring Education</h2>
    </div>
    
    <h2 class="p1">HELP MEEEE</h2>
    
    


</body>

【问题讨论】：

欢迎来到 Stack Overflow，您能否指出各个元素并解释您需要的输出？
您的 position: absolute 元素会扼杀流程。不是您的实际定位元素。去掉allposition: absolute就可以正常滚动网站了。提示：你的布局根本不需要position: absolute。
欢迎来到 Stack Overflow！绝对定位是一种非常糟糕的网页布局方法。它非常不灵活，并且有更好、响应速度更快的选项。查看LearnLayout.com
@cloned 我使用 absolute 来强制每个部分中的图像，但我可以尝试返回并重新设计它。哎呀
也许张贴一张关于你的设计应该是什么样子的图片。

标签： html css

【解决方案1】：

我认为对某些元素使用绝对定位不一定有什么问题。您遇到的主要问题是因为 #parent 内的所有内容都是绝对定位 #parent 折叠并且高度为零。如果你想做重叠的圆圈，绝对定位是一种有效的方法，但你必须为#parent明确设置一个高度。

以下是您的代码的修改副本。我想强调这是一个非常粗略的起点，而且绝不是完整的，但我认为它展示了您可以做的一些事情。即使圆形元素具有绝对定位，它仍然具有相当的响应性，并且可以通过向 css 添加适当的媒体查询来使其完全响应。

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans HK', sans-serif;
}

/* Arranging the parent and child elements so 
images can overlap */
 
.child {
    position: absolute;
}
.child-1 {
    top: -75px;
    left: -75px;
    z-index: 100;
    width: 300px;
    height: 300px;
    max-width: 50vw;
    max-height: 50vw;
    background: blue;
    border-radius: 50%;
}

.child-1 h1 {
  position: absolute;
  right: 10%;
  bottom: 20%;
  background: white;
  
}
.child-2 {
    right: -40vw;
    top: -50vw;
    z-index: 1;
    width: 120vw;
    height: 120vw;
    background: center / contain no-repeat url("./Images/circle_hands_lbsphoto.png"), content-box linear-gradient(lightgray, lightgray);
    border-radius: 50%;
    
}

.child-3 {
    top: 60vh;
    left: -5vw;
    width: 550px;
    height: 550px;
    max-width: 50vw;
    max-height: 50vw;
    border-radius: 50%;
    background: lightgreen;
    
}
#parent {
    position: relative;
    min-height: 100vh;
    height: 550px;
    width: 100vw;
    overflow: hidden;
}

.hero-text {
    position: absolute;
    text-align: center;
    left: 40%;
    transform: translateX(-50%);
    top: 60%;
    z-index: 9;
    font-size: 3.5vw;
    color: white;
}

/* Responsive viewport area, 
Logo resize based on the screen size */

#logo_png {
    max-width: 25vw;
}

#hero_img {
    max-width: 85vw;
    
}

#green_circle_png {
    max-width: 40vw;
    position: absolute;
    bottom: 20%;
    left: 20%;
}

/* NAV BAR STYLING */

#container {
    z-index: 900;
    width: 100%;
    margin: 0 auto;
    position: sticky;
    top: 0;
    background: #fff;
}


nav {

}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin-left: 5vw;   /* margin-left obly touches the left margin, not L & R */
    padding-top: 25px;

    position: relative;
}

nav a {
    color: black;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.4vw;
}

nav a:hover {
    color: black;
}



.p1 {
    color: #f5f7ff;
    font-size: 10vw;
}
#test {
    position: relative;
}

<body>
    <div id="parent">
            <div class="child child-1">
                <h1>
                    <a href='THIS WILL BE LINK TO HOME PAGE'>
                        <img id="logo_png" src="C:\Users\rebec\Desktop\LBS WEBSITE\Images\lbs_blue_circle_logo_1500x1500.png" alt="Little Big Scientists 1"/>   
                    </a>
                </h1>
            </div>

            <div class="child child-2">
                
                    <img id="hero_img" alt="Little Big Scientists 2"/>
              
                <div class="hero-text">
                <p>We’re on a mission to teach,
                    <br>guide, and empower the next
                    <br> generation of scientists
                </p>
            </div>
            </div>

            <div class="child child-3">
                <h1>
                    <img id="green_circle_png" src="Images/green_circle_lbswebsite.png" alt="Little Big Scientists 3"/>
                </h1>
            </div>
    </div>
     <!-- Div for Nav Bar-->
            <div id="container"> 

                <nav>
                    <ul>
                        <li><a href="#">Mission</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Donate</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
        
            </div>

    
    <div id="test">
            <h2 class="p1">Inspiring Education</h2>
    </div>
    
    <h2 class="p1">HELP MEEEE</h2>
    
    


</body>

【讨论】：

这对于理解元素如何协同工作非常有帮助，谢谢！我只能通过将蓝色徽标图像放置在绝对位置来修复它，因为我不在乎它是否超出了网站流程。我需要在流程中出现的是主图像，因此我将其设置为正常，并且它很好地滑到了徽标下方，因为它不再被考虑在那里。由于 div 太大，网站的其余部分现在可以很好地堆叠在下面。我明白你所说的关于高度的内容，这有助于我理解 CSS 中发生的事情。万事如意！