如何在html和css中放置在图像前面，以便您可以阅读它

Question

所以我试图在图像上方制作<h1></h1>，以便您可以阅读它，但它随机出现在屏幕的左下角。我用垂直网格柱来做这个，所以这可能就是问题所在。有人能看到我做错了什么并帮我吗？

* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
scroll-behavior: smooth;
}
.clear {
clear: both;
}
.container {
display: grid;
column-gap: 20px;
grid-template-columns: repeat(16, 1fr);
}
.container .beginpagina {
grid-column: 1 / 17;
height: 700px;
position: relative;
}
.container .beginpagina img {
width: 100%;
height: auto;
filter: blur(0.7px);
clip-path: polygon(100% 0, 100% 60%, 50% 78%, 0 60%, 0 0);
}
.container .beginpagina h1 {
position: absolute;
color: red;
font-size: 30px;
}

<div class="container">
<div class="clear"></div>
<div class="beginpagina">
<img src="img/universe3.jpeg" />
<h1>Beginpagina</h1>
</div>
</div>

Answer 1

使用CSS网格，您不需要使用定位。只需将项目放置在同一网格单元中。

对于分层，只需调整h1的z-index即可。

* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
scroll-behavior: smooth;
}

.container {
display: grid;
column-gap: 20px;
grid-template-columns: repeat(16, 1fr);
}
.container .beginpagina {
grid-column: 1 / -1;
height: 700px;
position: relative;
display:grid
}
.container .beginpagina img {
width: 100%;
height: auto;
filter: blur(0.7px);
clip-path: polygon(100% 0, 100% 60%, 50% 78%, 0 60%, 0 0);
grid-row: 1;
grid-column:1;
}
.container .beginpagina h1 {
color: red;
font-size: 30px;
grid-row: 1;
grid-column:1;
z-index:2;
text-align:center;
}

<div class="container">
<div class="beginpagina">
<img src="https://assets.codepen.io/3999/chicago_dual_monitor-2560x1024.jpg" />
<h1>Beginpagina</h1>
</div>
</div>

Answer 2

给你的h1"左"；风格，它重新定位你的h1元素的x位置，我建议你必须给出"z索引"；

.container .beginpagina h1{
position: absolute;
color: red;
font-size: 30px;
}