html - 如何防止 div 的位置在调整屏幕大小时发生变化

Question

我有这个代码

<div id="PageContainer">
    <main>
      <section id="section1">
        <div id="section1width">
          <div id="section1Content">
            <p id="logo">Logo</p>
            <h1 id="h1Section1">Start tracking your life with MementoMori</h1>
            <p id="pSection1">Improves life check</p>
            <div id="buttonCenterSection1">
              <button>Try it</button>
            </div>
            <div id="bigTextSection1Container">
              <div id="bigTextSection1">
                <p id="pSection1"> Try mementomori now, and start lorem impusm lorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusm</p>
              </div>
            </div>
            <div id="imgContainerSection1">
              <img id="imgSection1" src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></img>
            </div>
          </div>
        </div>
      </section>
      <section id="section2"></section>
    </main>
  </div>

而这个CSS

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

#section1{
    height:100vh;
    background-color: blue;
    display:flex;
    justify-content: center;
}
#section1width{
    width:60%;
    height:80%;
    background-color:purple;
    display:flex;
    justify-content:center;
    
}

#section1Content{
    width:80%;
    
    
}
#logo{
    text-align:center;
}

#h1Section1{
    text-align:center;
}
#pSection1{
    text-align:center;
}

#buttonCenterSection1{
    display:flex;
    justify-content: center;
}
#bigTextSection1Container{
    display:flex;
    justify-content: center;
}
#bigTextSection1{
    width:50%;
}
#imgContainerSection1{
   
    display:flex;
    justify-content:center;
}

#imgSection1{
    width:75%;
    height:75%;
}

#section2{
    height:100vh;
    background-color:red;
}

我面临的问题如下

我试图将红色框移动到黄色位置。我用 magrin-top: 15vh 做到了，但问题是它没有响应，如果我改变屏幕尺寸，一切都会再次混乱。

如何在屏幕调整大小时在顶部应用边距而不弄乱结构？

标签： htmlcss

Answer 1

我没有完全理解你的要求。根据我的理解，我认为您希望 #section1Content 即使在调整大小时也始终保持在同一位置。问题是您以 vh 单位给出了边距顶部（根据窗口高度更改）。尝试在 px 中给出 margin-top 并尝试调整大小。

margin-top: 200px;

这是你需要的吧？请试试这个，看看这是否是你想要的