缩小页面时，DIV 会从它们的位置移动

Question

所以基本上我的问题是当我放大和缩小页面时，一些 DIV 从它们的位置移出，导致我的布局中断。我使用位置相对和绝对属性以及使用 % 而不是 px 作为我定位的单位。我看过一些文章说使用绝对位置是不利的，这是一种预期的行为，但我似乎找不到我的问题的答案。我也尝试找到一种使用 CSS Flexbox 的方法，但我找不到我的问题的直接答案。

我预期的布局应该类似于 https://snipboard.io/Mr8sNv.jpg 但正如我之前所说，缩放时它会中断 in/out。

这是我的HTML。

        <div class="Container">
            <div class="background">                  
                <div class="Space"></div>
                <p class="Branding_Design">BRANDING & DESIGN</p>
                <div class="Project_One">Project One</div>
                <div class="SliderBOX"></div>
                <div style="position:absolute; right: 8%; top: 59%;">
                    <div class="ProjectDetailsContainer">
                        <p class="Project_Details">PROJECT DETAILS</p>                 
                    </div>
                </div>
                <div style="position:absolute; right: 12%; top: 62.5%;">
                    <div class="ViewSlidesContainer">
                        <p class="View_Slides">VIEW SLIDES</p>                            
                    </div>
                </div>                    
             </div>                  
        </div>

这是我的 CSS

.Container {
  width: 100%;
  position: relative;
  height: 721px;
}

.background {
  background: black;
  width: 100%;
  height: 100%;
}

h3 {
  text-align: center;
}

.Space {
  width: 1000px;
  height: 100px;
  background: red;
  position: relative;
  z-index: -1;
}

.SliderBOX{
    height: 525px;
    width: 50%;
    background: yellow;
    margin: 0 auto;
}
.Branding_Design {
  font-size: 10px;
  font-weight: 500;
  font-family: 'Open Sans';
  color: #f7ac53;
  letter-spacing: 0.5px;
  position: absolute;
  top: 39%;
  left: 12%;
}

.Project_One {
  color: white;
  font-family: "Merriweather";
  font-size: 39px;
  font-weight: 300;
  position: absolute;
  top: 45%;
  left: 14%;
  z-index: 1;
}

.ProjectDetailsContainer {
  position: relative;
}

.Project_Details {
  color: white;
  font-family: 'Open Sans';
  font-weight: 400;
  font-size: 11px;
}


.ViewSlidesContainer {
  position: relative;
}

.View_Slides {
  color: white;
  font-family: 'Open Sans';
  font-weight: 400;
  font-size: 11px;
}

我还将我的代码包含在 jsfiddle 中，以便更容易地查看我的代码 https://jsfiddle.net/wa3bLx1h/22/

我做错了什么？

Answer 1

我认为相信下面的代码，您要找的是正确的吗？ Flex-box 将解决此问题。我建议只是通过 MDN 教程并弄乱 flex-box 的每个属性。您的问题现在帮助我更好地理解了 Parent 和 Child 容器。

<div class="container">
  <div class="background">
    <div class="space"></div>
    <div class="textCon1">
      <div class="p-text-1">
        <p class="brandingDesign"> BRANDING & DESIGN</p>
      </div>
      <div class="p-text-2">
        <p class="projectOne">Project One</p>
      </div>
    </div>
    <div class="sliderBox"></div>
    <div class="projectDetailContainer">
      <div class="p-text-3">
        <p class="projectDetails"> PROJECT DETAILS</p>
      </div>
      <div class="viewSlideContainer">
        <p class="viewSlides">VIEW SLIDES</p>
      </div>
    </div>
  </div>
</div>


* {
  margin: 0;
  padding: 0;
}

.container {
  height: 721px;
  width: 100%;
}
.background {
  height: 100%;
  width: 100%;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sliderBox {
  height: 525px;
  width: 50%;
  display: flex;
  background: yellow;
}
.textCon1 {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}
.brandingDesign {
  font-size: 10px;
  font-weight: 500;
  font-family: "Open Sans";
  color: #f7ac53;
  letter-spacing: 0.5px;
  margin-right: 100px;
  padding: 5px;
}
.projectOne {
  color: white;
  font-family: "Merriweather";
  font-size: 39px;
  font-weight: 300;
  margin-left: 50px;
  padding: 5px;
}
.projectDetailContainer {
  display: flex;
  flex-direction: column;
  margin-top: 200px;
  margin-left: 100px;
}
.projectDetails {
  color: white;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 11px;
  margin-left: 50px;
  padding: 10px;
}
.viewSlides {
  color: white;
  font-family: "Open Sans";
  font-weight: 400;
  font-size: 11px;
  padding: 5px;
}

缩小页面时，DIV 会从它们的位置移动

DIVs are moving from their positions when zooming out of the page

html

css

layout

css-position

flexbox