显示包含元素之外的文本

我想实现这一点。留意顶部文字'开心果'。当它嵌套在盒子中时，我想要覆盖盒子。显示包含元素之外的文本

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里面，但我怎么可以让它去上面/站在它就可以了，而它仍然嵌套在（html）内？我试过玩z-index，但没有奏效。

position: relative; top: -50px;

来源

2017-07-31 Panic

'H1 {位置：相对;顶部：-50px;}' – UncaughtTypeError

这不起作用，然后发生这种情况（检查img在更新后） – Panic

'.slider {overflow：visible;}'看起来是一个简单的溢出问题，事情是，应用此解决方案在所提供的代码片段中是有效的，因此如果它不适用于您的生产环境，那么您还没有将其他样式或因素包含在您提供给我们处理和排除故障的代码中。 – UncaughtTypeError

有什么不对调整<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>

来源

2017-07-31 14:53:26

感谢您的输入，但有人提到添加溢出：对.slider可见，并修复它 – Panic

使用绝对定位。

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>

来源

2017-07-31 14:50:34 Gerard

您可以使用linear-gradient这里为box-shadow，您可以使用绝对定位pseudoelement（有需要的偏移量）。例如，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>

来源

2017-07-31 15:18:49

显示包含元素之外的文本

回答

相关问题