在包含元素之外显示文本

Question

我想实现这个。留意最上面的文字'Happy Fruit'。当盒子嵌套在里面时，我想覆盖它。

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;
}

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

如果我然后去添加一个 margin-top: -50px; 到 h1，文本将保留在 内 div，但我怎样才能让它继续 above/standing it 在它仍然被嵌套在里面 (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>

在包含元素之外显示文本

Display text outside of containing element

html

css

css-position

positioning