Html 缩小页面时，div正在从其位置移动

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

我预期的布局应该是这样的，但正如我前面所说的，放大/缩小时它会中断

这是我的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>

我还将我的代码包含在JSFIDLE中，以便更容易地浏览我的代码

---

我做错了什么？

我想你应该相信下面的代码是正确的吗？Flex box将是解决此问题的解决方案。我建议您只需阅读MDN教程，并熟悉flex box的每个属性。您的问题现在帮助我更好地理解了父容器和子容器

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

品牌与设计
项目一
项目详情
查看幻灯片

* {
保证金：0；
填充：0；
}
.集装箱{
高度：721px；
宽度：100%；
}
.背景{
身高：100%；
宽度：100%；
背景：黑色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.滑盖盒{
高度：525px；
宽度：50%；
显示器：flex；
背景：黄色；
}
.textCon1{
显示器：flex；
弯曲方向：立柱；
右边距：10px；
}
.品牌设计{
字体大小：10px；
字号：500；
字体系列：“开放式SAN”；
颜色：#f7ac53；
字母间距：0.5px；
右边距：100px；
填充物：5px；
}
.项目一{
颜色：白色；
字体系列：“Merriweather”；
字体大小：39px；
字体大小：300；
左边距：50像素；
填充物：5px；
}
.projectDetailContainer{
显示器：flex；
弯曲方向：立柱；
利润上限：200px；
左边距：100px；
}
.项目详情{
颜色：白色；
字体系列：“开放式SAN”；
字体大小：400；
字体大小：11px；
左边距：50像素；
填充：10px；
}
.观看幻灯片{
颜色：白色；
字体系列：“开放式SAN”；
字体大小：400；
字体大小：11px；
填充物：5px；
}

您的预期布局是什么？@huanfeng这是我的预期布局谢谢，我认为这是解决问题的好办法。

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