Question

我想在.entry-image div的顶部显示H标记，因此看起来好像.entry-image是H标记的背景。

这是我的代码结构：

<div class="entry-image">
<a href="http://metromom.net/blog-category/newspaper-article/" rel="bookmark">
<img src="myphoto.jpg">
</a>
</div>

<h4 class="entry-title">Title </h4>

我无法编辑HTML，因为它是由WordPress插件输出的;因此需要一种仅使用CSS的方法。

Answer 1

根据HTML的结构，使用CSS实现这一点并不是一种可靠的方法。理想情况下，您需要能够将H4移入＆＃34;入口图像＆＃34; div，然后绝对定位它：

＆＃13;

.entry-image {
  position: relative;
}

.entry-title {
  position: absolute;
  top: 15px;
  left: 15px;
}

＆＃13;

<div class="entry-image">
    <h4 class="entry-title">Title </h4>
      <a href="http://metromom.net/blog-category/newspaper-article/" rel="bookmark">
        <img src="http://via.placeholder.com/350x150">
      </a>
    </div>

＆＃13;

然而，如果您无法编辑插件输出的代码 - 您可以在其周围包装容器（取决于主题中输出的生成方式/位置））。你可以这样做：

＆＃13;

.your-wrapping-container {
  position: relative;
}

.entry-title {
  position: absolute;
  top: 15px;
  left: 15px;
}

＆＃13;

<div class="your-wrapping-container">

<div class="entry-image">
      <a href="http://metromom.net/blog-category/newspaper-article/" rel="bookmark">
        <img src="http://via.placeholder.com/350x150">
      </a>
    </div>

    <h4 class="entry-title">Title </h4>
    
</div>

＆＃13;

如果这也不可能 - Javascript将是您的下一个选项，因为您需要计算＆＃34;条目图像＆＃34; div相对于文档的位置;然后使用此信息来定位＆＃34;条目标题＆＃34;元件。

这样的事情可以帮到你：

＆＃13;

var entryImagePosition = $('.entry-image').offset();

$('.entry-title').css({position: 'absolute', top: entryImagePosition.top+15, left: entryImagePosition.left+15});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="entry-image">
      <a href="http://metromom.net/blog-category/newspaper-article/" rel="bookmark">
        <img src="http://via.placeholder.com/350x150">
      </a>
    </div>

    <h4 class="entry-title">Title </h4>

＆＃13;

希望这有帮助！

Answer 2

至少2个解决方案：

只需更改H标签和图像的顺序（简单正确的解决方案）：

<h4 class="entry-title">Title </h4>
<div class="entry-image">
<a href="http://metromom.net/blog-category/newspaper-article/" rel="bookmark">
<img src="myphoto.jpg">
</a>
</div>

或者使用CSS来定位它们。它更棘手，并且具有更多“固定”值，但它不会改变您的DOM结构。使其工作的最重要的事情是将“位置”值设置为“相对”或“绝对”，用于父母的两个和图像（下面的代码段中的“main”元素）：

.main {
  position: relative;
  border: 1px solid;
}

.entry-image {
  /* Adapt the margin-top value to make space for H tag */
  margin-top: 3em;
  /*
  Or position it absolute

  position: absolute;
  top: 3em;
  */

}

.entry-title {
  position: absolute;
  top: 0px;
}

<div class="main">

<div class="entry-image">
<a href="http://metromom.net/blog-category/newspaper-article/" rel="bookmark">
<img src="myphoto.jpg">
</a>
</div>

<h4 class="entry-title">Title </h4>

</div>

使用CSS在div标签顶部添加H标签

2 个答案: