Question

我正在尝试使该布局看起来更具实质性（like this site），其中第一个div与英雄图像重叠。我已经尝试设置在std::round到-100px，试图把它的利润率，但随后开始有点乱了，当缩小到手机大小。有没有一种简单的方法可以使我丢失呢？

提琴：https://jsfiddle.net/kq0x48fc/

static_cast<int>(std::round(TIP_PERCENTAGE * 100.0))

Answer 1

您可以使用负边距将内容拖到上方的元素上...

.main-outer {
    margin-top: -100px;
}

或者您可以将英雄图像用作no-repeat的正文背景，然后将内容放置在所需页面的下方。

这是一个简单的页面结构方式示例 .page div代表您的身体。

.page {
  height: 500px;
  width: 100%;
  position: relative;
  background: tan;
  }
  
.hero {
  width: 100%;
  height: 40%;
  background: blue url(https://images.unsplash.com/photo-1523575518836-9166d367179f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) top center no-repeat;
  background-size: cover;
}
.content {
  background-color: white;
  min-height: 600px;
  margin: -100px auto 0 auto;
  width: 80%;
  border-radius: 10px;
  padding: 20px;
}

<div class="page">
  <div class="hero"></div>
  <div class="content">
    Some content
  </div>
</div>

Answer 2

您可以将section .hero设置为position: absolute，而不要应用top: 0。然后，在main-outer类中，您可以添加一些margin-top以获取所需的距离。

Answer 3

首先，您将负边距应用于错误的元素。您应该将其应用于.hero之后的第一个孩子。

致.about-inner。

此外，第二部分中使用的垂直居中技术将两个元素在整个视口高度的空间中居中，这会在更宽（更高）的屏幕上产生影响。要禁用它，只需从min-height中删除.main-outer：

body {
  margin: 0;
  font-family: 'Montserrat', serif;
}

h1 {
  font-size: 1.5em;
  font-weight: 600;
}

h6 {
  font-family: 'Montserrat', serif;
  font-size: 0.8em;
  font-weight: 200;
  display: block;
  text-align: center;
}

.header {
  height: 80px;
  display: flex;
  justify-content: left;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

.hero {
  /* Sizing */
  width: 100%;
  min-height: 60vh;
  /* Flexbox Stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
  /* Text styles */
  text-align: center;
  /* Background styles */
  background-color: red;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background: white;
  padding: 5px;
}

.flex-container>* {
  margin: auto;
}

.flex-container img {
  display: block;
  width: 150px;
  height: auto;
  margin: 5px;
}

.main-outer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  background-color: #eeeeee;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 50px;
}

.main-outer>* {
  width: 80vw;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .1), 0 5px 8px 0 rgba(0, 0, 0, .07), 0 1px 14px 0 rgba(0, 0, 0, .06)
}

.about-inner {
  margin-top: -50px;
  margin-bottom: 10px;
  width: 80vw;
  background-color: white;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.clients-inner {
  background-color: white;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about-inner h3,
.clients-inner h3 {
  font-size: 1.5em;
  font-weight: 600;
  padding-top: 10px;
  letter-spacing: 0.1em;
}

.about-inner p,
.clients-inner p {
  font-size: 1em;
  font-weight: 300;
  text-align: left;
  padding: 0 10vw 1em;
  line-height: 2em;
}

.hero h1 {
  /* Text styles */
  font-size: 3em;
  color: white;
  /* Margins */
  margin-bottom: 0.5em;
  padding: 20px;
}

<section class="hero">
  <div class="hero-inner">
    <h1>Lorem ipsum<br>dolor sit amet.</h1>
  </div>
</section>

<div class="main-outer">

  <div class="about-inner">
    <h3>「 About 」</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  </div>

  <div class="clients-inner">
    <h3>「 Clients 」</h3>
    <div class="flex-container">
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="1" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="2" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="3" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="4" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="5" />
      </div>
    </div>
  </div>
</div>

我还对其进行了一些调整：

将100px的水平填充更改为10vw
在bottom-padding上添加了hero，以抵消下一个元素的负边距
使用100%作为.hero的宽度而不是100vw来消除水平线（这是由于body在堆栈溢出片段上有余量）。
将软box-shadow应用于类似卡片的元素

如何将Diving与Hero Image重叠以实现材料设计外观？

3 个答案: