Блог

Итак, в основном моя проблема заключается в том, что когда я увеличиваю или уменьшаю масштаб страницы, некоторые DIVS смещаются со своей позиции, что приводит к разрыву моего макета. Я использовал свойства position relative и absolute, а также использовал % вместо px в качестве единиц измерения при позиционировании. Я просмотрел несколько статей, в которых говорилось, что нецелесообразно использовать абсолютную позицию и что это ожидаемое поведение, но я, похоже, не смог найти ответ на свой вопрос. Я также попытался найти способ сделать это с помощью CSS Flexbox, но я не смог найти прямого ответа на свою проблему.

Мой ожидаемый макет должен быть чем-то вродеhttps://snipboard.io/Mr8sNv.jpg но, как я уже говорил ранее, он ломается при увеличении / уменьшении масштаба.

Вот мой HTML.

         <div class="Container">
            <div class="background">                  
                <div class="Space"></div>
                <p class="Branding_Design">BRANDING amp; 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 /

Что я делаю не так?

Я думаю, что приведенный ниже код — это то, что вы ищете, правильно? 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 amp; 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;
}