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>

如果我然后去向h1添加margin-top: -50px;，文本将在div中保持，但是如果它仍然在上面，我怎么能让它在它上面/站在它上面嵌套在里面（html）？我曾尝试使用z-index，但这不起作用。

position: relative; top: -50px;

.slides有overflow: hidden;，因为如果它在overflow:visible;上，则滑块的其他幻灯片会显示，就像这样。

Answer 1

问题是因为collapsing margin。

添加边框：1px实心透明;如下面的代码解决方案一样，滑块类并给h1标签中的margin-top指向-40px，如下面的代码解决方案。

＆＃13;

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

＆＃13;

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

＆＃13;

在可见性保持隐藏的同时显示嵌套div外部的元素

1 个答案: