使用Bootstrap card-img-overlay后Chrome DevTools无法选中子元素，是否用法错误？

嘿，我来帮你排查这个问题～你并没有错误使用card-img-overlay类，这个问题主要是Bootstrap的定位逻辑和Gatsby Image组件的渲染特性共同导致的，具体原因和解决方法如下：

为什么会出现无法选中元素的情况？ #

Bootstrap的card-img-overlay默认是绝对定位（position: absolute），它会相对于父级的Card（默认是position: relative）占满整个卡片的高度，而不是只覆盖你设置了maxHeight: 150px的图片区域。这就导致这个overlay层会延伸到下方的Card.Body区域上方，拦截了你的点击/选择操作，所以Chrome DevTools无法选中下面的标题等元素。

解决方法（任选其一即可） #

方法1：限制overlay的高度，让它只覆盖图片区域

给card-img-overlay添加和图片一致的高度限制，这样它就不会往下延伸覆盖Card.Body：

<div className="card-img-overlay" style={{ height: "150px" }}>
  <Tags tags={frontmatter.tags} />
</div>

方法2：提升Card.Body的层级

给Card.Body设置相对定位和更高的z-index，让它的内容显示在overlay层上方：

<Card.Body style={{ position: "relative", zIndex: 1 }}>
  <Card.Title>{frontmatter.title}</Card.Title>
  <Card.Subtitle>
    <div className="d-flex justify-content-between">
      <span className="text-info">{frontmatter.date}</span>
      <TimeToRead minutes={timeToRead} />
    </div>
    <hr />
  </Card.Subtitle>
  <Card.Text dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} ></Card.Text>
</Card.Body>

方法3：优化Gatsby Image的样式适配

因为Gatsby的Img组件生成的是容器div而非原生img标签，你可以给它补充img-fluid类确保样式适配Bootstrap的card结构：

<Img className="card-image-top img-fluid" style={{ maxHeight: "150px" }} fluid={frontmatter.image.childImageSharp.fluid} />

验证效果 #

修改后刷新页面，你应该就能正常用Chrome DevTools选中标题等Card.Body内的元素了～

内容的提问来源于stack exchange，提问作者Matthias Güntert