1

我正试图top-firstsection在flex-firstsection. 喜欢让它留在红色背景部分的顶部。现在它看起来像是一个带有白色背景的导航栏。我尝试使用position:absolute，position: fixed虽然它确实有效，但当我向下滚动时它会粘在顶部。我只是希望它留在那个部分。有什么帮助吗？

.top-firstsection {
  display: flex;
}

.nav-list {
  margin-left: auto;
  list-style: none;
  display:flex;

}

.login {
  font-family: Helvetica;
  font-size: 13px;
  color: #000000;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
  cursor: pointer;
}

.register {
  font-family: Helvetica;
  font-size: 13px;
  color: #0972D7;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
}

.first-left {
  padding-top: 220px;
  padding-left: 171px;
}

.flex-firstsection {
  display: flex;
  justify-content: space-between;
background-color: #e8534b;
}

.first-left h1 {
  font-family: Poppins-Regular;
  font-size: 40px;
  color: #000000;
  letter-spacing: 0;
  line-height: 50px;
}

.sectionOne-textbox {
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  font-family: Helvetica;
  font-size: 14px;
  color: #000000;
  letter-spacing: 1.05px;
  line-height: 52px;
  width: 80%;
}

.sectionOne-button {
  background: #1F8FFB;
  border-radius: 4px;
  border: 1px solid;
  padding: 16px 25px;
  font-family: Helvetica;
  font-size: 13px;
  color: #FFFFFF;
  letter-spacing: 1.3px;
  text-align: center;
  margin-top: 24px;
}
<section class="first-section">
  <div class="top-firstsection">
    <img src="images/Group.png" alt="logo" class="logo-header">
    <ul class="nav-list flex">
      <li>
        <a href="#" class="login">LOGIN</a>
      </li>
      <li>
        <a href="#" class="register">REGISTER</a>
      </li>
    </ul>
  </div>
  <div class="flex-firstsection">
    <div class="first-left">
      <h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
      <input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
      <button class="sectionOne-button">GET STARTED NOW!</button>
    </div>
    <div>
      <img src="images/firstsectionbackground.png" alt="main graphic">
    </div>
  </div>
</section>

4

2 回答 2

0

有两种方法可以将top-firstsection内部放入flex-firstsection其中flex-firstsection，然后相应地重新设计

.top-firstsection {
  display: flex;
}

.nav-list {
  margin-left: auto;
  list-style: none;
  display:flex;

}

.login {
  font-family: Helvetica;
  font-size: 13px;
  color: #000000;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
  cursor: pointer;
}

.register {
  font-family: Helvetica;
  font-size: 13px;
  color: #0972D7;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
}

.first-left {
  padding-top: 220px;
  padding-left: 171px;
}

.flex-firstsection {
  display: flex;
  justify-content: space-between;
background-color: #e8534b;
}

.first-left h1 {
  font-family: Poppins-Regular;
  font-size: 40px;
  color: #000000;
  letter-spacing: 0;
  line-height: 50px;
}

.sectionOne-textbox {
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  font-family: Helvetica;
  font-size: 14px;
  color: #000000;
  letter-spacing: 1.05px;
  line-height: 52px;
  width: 80%;
}

.sectionOne-button {
  background: #1F8FFB;
  border-radius: 4px;
  border: 1px solid;
  padding: 16px 25px;
  font-family: Helvetica;
  font-size: 13px;
  color: #FFFFFF;
  letter-spacing: 1.3px;
  text-align: center;
  margin-top: 24px;
}
<section class="first-section">
<div class="flex-firstsection">
  <div class="top-firstsection">
    <img src="images/Group.png" alt="logo" class="logo-header">
    <ul class="nav-list flex">
      <li>
        <a href="#" class="login">LOGIN</a>
      </li>
      <li>
        <a href="#" class="register">REGISTER</a>
      </li>
    </ul>
  </div>
  <div class="flex-firstsection">
    <div class="first-left">
      <h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
      <input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
      <button class="sectionOne-button">GET STARTED NOW!</button>
    </div>
    <div>
      <img src="images/firstsectionbackground.png" alt="main graphic">
    </div>
  </div>
</section>

其他方式是使两个背景颜色相同，如下面的片段使其相同。

.top-firstsection {
  display: flex;
  background-color: #e8534b;
}

.nav-list {
  margin-left: auto;
  list-style: none;
  display: flex;
}

.login {
  font-family: Helvetica;
  font-size: 13px;
  color: #000000;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
  cursor: pointer;
}

.register {
  font-family: Helvetica;
  font-size: 13px;
  color: #0972D7;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
}

.first-left {
  padding-top: 220px;
  padding-left: 171px;
}

.flex-firstsection {
  display: flex;
  justify-content: space-between;
  background-color: #e8534b;
}

.first-left h1 {
  font-family: Poppins-Regular;
  font-size: 40px;
  color: #000000;
  letter-spacing: 0;
  line-height: 50px;
}

.sectionOne-textbox {
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  font-family: Helvetica;
  font-size: 14px;
  color: #000000;
  letter-spacing: 1.05px;
  line-height: 52px;
  width: 80%;
}

.sectionOne-button {
  background: #1F8FFB;
  border-radius: 4px;
  border: 1px solid;
  padding: 16px 25px;
  font-family: Helvetica;
  font-size: 13px;
  color: #FFFFFF;
  letter-spacing: 1.3px;
  text-align: center;
  margin-top: 24px;
}
<section class="first-section">
  <div class="top-firstsection">
    <img src="images/Group.png" alt="logo" class="logo-header">
    <ul class="nav-list flex">
      <li>
        <a href="#" class="login">LOGIN</a>
      </li>
      <li>
        <a href="#" class="register">REGISTER</a>
      </li>
    </ul>
  </div>
  <div class="flex-firstsection">
    <div class="first-left">
      <h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
      <input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
      <button class="sectionOne-button">GET STARTED NOW!</button>
    </div>
    <div>
      <img src="images/firstsectionbackground.png" alt="main graphic">
    </div>
  </div>
</section>

可以考虑的事情，如果你想top-firstsection和flex-firstsection彼此靠近：

  • 考虑降低使两者靠近的padding-top价值.first-left
  • 可以通过使用 -vemargin来按照其他答案中的说明使用flex-firstsection

这些是您可以选择并记住的一些方法，如果您想相互重叠，而不是其他内容可能隐藏在其他内容下，这对您的网站不利，因此请尽量减少它们之间的空间。

最后一件事，如果你真的想互相重叠，那么试试这个使用position: absolute和margin-top属性重叠的方法

根据需要添加装饰，仅用于演示

.top-firstsection {
  display: flex;
  background-color: red;
  width: 97%;
  position: absolute;
  margin-top: 80px
}

.nav-list {
  margin-left: auto;
  list-style: none;
  display: flex;
}

.login {
  font-family: Helvetica;
  font-size: 13px;
  color: #000000;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
  cursor: pointer;
}

.register {
  font-family: Helvetica;
  font-size: 13px;
  color: #0972D7;
  letter-spacing: 0.98px;
  text-align: center;
  text-decoration: none;
  line-height: 26px;
}

.first-left {
  padding-top: 220px;
  padding-left: 171px;
}

.flex-firstsection {
  display: flex;
  justify-content: space-between;
  background-color: #e8534b;
}

.first-left h1 {
  font-family: Poppins-Regular;
  font-size: 40px;
  color: #000000;
  letter-spacing: 0;
  line-height: 50px;
}

.sectionOne-textbox {
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  font-family: Helvetica;
  font-size: 14px;
  color: #000000;
  letter-spacing: 1.05px;
  line-height: 52px;
  width: 80%;
}

.sectionOne-button {
  background: #1F8FFB;
  border-radius: 4px;
  border: 1px solid;
  padding: 16px 25px;
  font-family: Helvetica;
  font-size: 13px;
  color: #FFFFFF;
  letter-spacing: 1.3px;
  text-align: center;
  margin-top: 24px;
}
<section class="first-section">
  <div class="top-firstsection">
    <img src="images/Group.png" alt="logo" class="logo-header">
    <ul class="nav-list flex">
      <li>
        <a href="#" class="login">LOGIN</a>
      </li>
      <li>
        <a href="#" class="register">REGISTER</a>
      </li>
    </ul>
  </div>
  <div class="flex-firstsection">
    <div class="first-left">
      <h1>Open marketplace <br> for ordering & purhasing <br> scientific experiments</h1>
      <input type="text" id="" class="sectionOne-textbox" placeholder="Discover new experiments...">
      <button class="sectionOne-button">GET STARTED NOW!</button>
    </div>
    <div>
      <img src="images/firstsectionbackground.png" alt="main graphic">
    </div>
  </div>
</section>

于 2021-09-18T18:04:45.207 回答
0

margin-top只需在第二个 div 中添加一个负数。这将与第一个 div 重叠：

#second-div {
  margin-top: -10vh;
}

/* for demonstration purpose only */
div {
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div:nth-of-type(1) {
  background-color: rgba(0, 0, 255, 0.5);
}

div:nth-of-type(2) {
  background-color: rgba(255, 0, 0, 0.5);
}
<div id="first-div">First section</div>
<div id="second-div">Second section</div>

于 2021-09-18T17:02:36.480 回答