css - 用重叠文字创建图块布局-负边距是错误的方法吗？

我正在尝试创建一个基本的图块布局，其中文本通过负边距覆盖每个图块。

.tile{float:left; margin-bottom:185px;}

.tile img{width:280px; height:290px; margin-right:5px; border:1px solid black;  }

h1{margin-top:-150px; background:rgba(0,0,0,.5); color:white; position:relative; max-width:280px;}

<div class="tile" id="tile1">
	<img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Las_vegas_late_60s.png" />
	<h1><span>Hello world</span><h1>
</div>

<div class="tile" id="tile2">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg" />
<h1><span>Goodbye world</span><h1>
</div>

<div class="tile" id="tile3">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/cf/Las_Vegas_seal.svg/212px-Las_Vegas_seal.svg.png" />
<h1><span>Hello world</span><h1>
</div>

<div class="tile" id="tile4">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/20/Photo_3974341-1500x1000-1.jpg" />
<h1><span>Hello world</span><h1>
</div>

不幸的是，在某些浏览器窗口大小下，负边距会导致其他图块重叠。但是，如果我为特定的窗口尺寸调整负边距，那么在其他以前适合的窗口尺寸上，我会遇到问题：





这个问题有什么解决方案？

最佳答案

.tile {
  display: inline-block;
  position: relative;
  width: 280px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.tile img {
  width: 100%;
  height: 290px;
  border: 1px solid black;
}
h1 {
  position: absolute;
  top: 150px;
  left: 1px;
  width: 100%;
  background: rgba(0, 0, 0, .5);
  color: white;
}

<div class="tile" id="tile1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Las_vegas_late_60s.png" />
  <h1><span>Hello world</span><h1>
</div><div class="tile" id="tile2">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Red_Rock_Canyon_National_Conservation_Area_-_Blue_Diamond%2C_Nevada.jpg" />
<h1><span>Goodbye world</span><h1>
</div><div class="tile" id="tile3">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/c/cf/Las_Vegas_seal.svg/212px-Las_Vegas_seal.svg.png" />
<h1><span>Hello world</span><h1>
</div><div class="tile" id="tile4">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/20/Photo_3974341-1500x1000-1.jpg" />
<h1><span>Hello world</span><h1>
</div>