HTML图片CSS边框无法完整显示问题求助

我有一个名为services.html的HTML页面，页面包含两张图片，其中placeholder.jpeg部分覆盖在physiotherapy-06.jpeg之上。我给placeholder.jpeg添加了CSS样式border: 10px solid gray;，但只有未被physiotherapy-06.jpeg覆盖的部分显示了边框，请问如何让边框完整环绕placeholder.jpeg的边缘？

我的代码 #

services.html #

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> -->
  <meta name="robots" content="index, follow" />
  <title>JU Physiotherapy - Services</title>
  <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="css/styles.css" />

</head>

<body>

  <header class="services-header">
    <img class="services-title-image" src="images/physiotherapy-06.jpeg" alt="">
    <img class="services-logo-image" src="images/placeholder.jpeg" alt="">
  </header>

</body>

</html>

styles.css #

.services-header {
    border: none;
}

.services-title-image {
    width: 100%;
}

.services-logo-image {
    width: 30%;
    display: block;
    border: 10px solid gray;
    margin: -15% auto 0;
}

问题截图 #

问题根源是下层的physiotherapy-06.jpeg默认层级高于上层的placeholder.jpeg，导致部分边框被遮挡。可以通过以下两种方式解决：

方法一：提升上层图片层级 #

给.services-logo-image添加定位和z-index属性，确保它在下层图片之上：

.services-logo-image {
    width: 30%;
    display: block;
    border: 10px solid gray;
    margin: -15% auto 0;
    position: relative; /* 必须添加定位才能使z-index生效 */
    z-index: 1;
}

z-index属性需要配合relative/absolute/fixed这类定位属性使用，设置后上层图片的显示层级会高于下层，边框就不会被遮挡了。

方法二：使用绝对定位实现叠加布局 #

给父容器设置相对定位，再给上层图片设置绝对定位，这种布局方式更可控：

.services-header {
    position: relative; /* 作为绝对定位的参考容器 */
    border: none;
}

.services-title-image {
    width: 100%;
}

.services-logo-image {
    width: 30%;
    border: 10px solid gray;
    position: absolute;
    bottom: -7.5%; /* 根据需求调整垂直位置 */
    left: 50%;
    transform: translateX(-50%); /* 实现水平居中 */
    z-index: 1;
}

这种方式无需依赖负margin调整位置，通过绝对定位和transform精准控制上层图片的位置，同时明确的层级关系能保证边框完整显示。

内容的提问来源于stack exchange，提问作者IsaacNewtonGravity