Question

我想实现这一目标。密切关注顶级文本＆＃39; Happy Fruit＆＃39; 。我想在它嵌套在盒子里时叠加盒子。

＆＃13;

body {
  background: yellow;
  padding: 50px;
}
.slider {
    width: 100%;
    height: 650px;
    margin-top: 40px;
    background: orange;
    box-shadow: 0 0 78px 11px #F3286B;
}
h1, h2 {
  text-transform:uppercase;
  color: red;
}
h1 {
  font-size: 11vw;
}
h2 {
  font-size: 7vw;
}

＆＃13;

<body>
<div class="slider">
<h1>
Happy Fruit
</h1>
<h2>
HELLO WORLD
</h2>
</div>
</body>

＆＃13;

如果我然后去向h1添加margin-top: -50px;文本将在div中保留，但是如何在文本中保持上面 39; s仍然嵌套在里面（html）？我尝试过使用z-index但是没有用。

position: relative; top: -50px;

Answer 1

使用绝对定位。

body {
  background: yellow;
  padding: 50px;
}

.slider {
  width: 100%;
  height: 650px;
  margin-top: 40px;
  background: orange;
  box-shadow: 0 0 78px 11px #F3286B;
  position: relative;
  padding-top: 1.2em;
}

h1,
h2 {
  text-transform: uppercase;
  color: red;
}

h1 {
  font-size: 11vw;
  position: absolute;
  top: -1.2em;
}

h2 {
  font-size: 7vw;
}

<div class="slider">
  <h1>
    Happy Fruit
  </h1>
  <h2>
    HELLO WORLD
  </h2>
</div>

Answer 2

调整<h1/>的位置有什么问题？您可以通过向.slider添加填充来抵消该位置。

.slider {
  position: relative; <!-- necessary in case other position is set in ancestry -->
  padding-top: 10px;
}
h1 {
  position: absolute;
  top: -10px;
}

如果在overflow: hidden;上设置.slider，您的标题将被截断。否则默认值为overflow: visible;，您应该没有问题。

body {
  background: yellow;
  padding: 50px;
}

.slider {
  width: 100%;
  height: 650px;
  margin-top: 40px;
  background: orange;
  box-shadow: 0 0 78px 11px #F3286B;
  position: relative;
  padding-top: 10px
}

h1,
h2 {
  text-transform: uppercase;
  color: red;
}

h1 {
  font-size: 11vw;
  position: absolute;
  top: -10px;
}

h2 {
  font-size: 7vw;
}

<body>
  <div class="slider">
    <h1>
      Happy Fruit
    </h1>
    <h2>
      HELLO WORLD
    </h2>
  </div>
</body>

Answer 3

您可以在此使用linear-gradient，对于box-shadow，您可以使用绝对定位的伪元素（需要偏移量）。

例如，40px偏移background-image: linear-gradient(to bottom, transparent 40px, orange 40px);。我们也应该将top: 40px应用于伪元素。

演示：

body {
  background: yellow;
  padding: 50px;
}

.slider {
  width: 100%;
  height: 650px;
  background-image: linear-gradient(to bottom, transparent 40px, orange 40px);
  position: relative;
}

.slider:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  box-shadow: 0 0 78px 11px #F3286B;
  /* don't overlap container */
  z-index: -1;
}

h1,
h2 {
  text-transform: uppercase;
  color: red;
}

h1 {
  font-size: 11vw;
}

h2 {
  font-size: 7vw;
}

<div class="slider">
  <h1>
    Happy Fruit
  </h1>
  <h2>
    HELLO WORLD
  </h2>
</div>

显示包含元素

3 个答案: