使用 jQuery 将时间定位在图像上

Question

我正在尝试使用 jQuery 通过 CSS 重新定位图像上的时间，但显然遗漏了一些东西。

默认情况下，它与作者姓名内联显示，因此我能够将其重新定位在图像下方，但不能像这样在图像上方

https://jsfiddle.net/6ruj2quw/8/

jQuery(function($) {

  // Add js body class.
  $('body').addClass('js');

  $('.home-middle article, .home-top article').each(function() {
    var $time = $(this).find('.entry-time');

    $(this).find('a.alignleft, a.alignnone, a.alignright').append($time);

  });

});

.js .content .home-middle a .entry-time,
.js .content .home-top a .entry-time {
  background-color: #e8554e;
  bottom: 24px;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  padding: 5px 10px;
  position: absolute;
  right: 0;
}

.js .home-middle a.alignleft,
.js .home-top a.alignleft {
  margin: 0 24px 24px 0;
}

.js .home-middle a.alignright,
.js .home-top a.alignright {
  margin: 0 0 24px 24px;
}

.js .home-middle a.alignleft img,
.js .home-middle a.alignright img,
.js .home-top a.alignleft img,
.js .home-top a.alignright img {
  margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="post-810 post type-post status-publish format-standard has-post-thumbnail category-fashion entry home-top" itemscope="" itemtype="https://schema.org/CreativeWork">
  <header class="entry-header">
    <a class="entry-image-link" href="http://example.com" aria-hidden="true"><img src="http://placehold.it/720x450&text=Image" class="alignleft post-image entry-image" alt="ALT" itemprop="image" width="750" height="420"><time class="entry-time" itemprop="datePublished" datetime="2017-09-21T21:13:24+00:00">September 21, 2017</time></a>
    <h2
      class="entry-title" itemprop="headline"><a href="http://example.com" rel="bookmark">Entry Title</a></h2>
      <p class="entry-meta"> by <span class="entry-author" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><a href="http://example.com" class="entry-author-link" itemprop="url" rel="author"><span class="entry-author-name" itemprop="name">authorname</span></a>
        </span>
        <span class="entry-comments-link"><a href="http://example.com/#respond">Leave a Comment</a></span> <a class="post-edit-link" href="http://test.dev/wp-admin/post.php?post=810&amp;action=edit">(Edit)</a></p>
  </header>
  <div class="entry-content" itemprop="text">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create ... <a class="more-link" href="http://example.com">Continue Reading</a></p>
  </div>
</article>

Answer 1

我将.entry-image-link 设置为display:block 和position:relative，并将时间元素设置为position:absolute。然后，您可以使用top、left、bottom、right 值调整绝对位置。

jQuery(function($) {

  // Add js body class.
  $('body').addClass('js');

  $('.home-middle article, .home-top article').each(function() {
    var $time = $(this).find('.entry-time');

    $(this).find('a.alignleft, a.alignnone, a.alignright').append($time);

  });

});

.js .content .home-middle a .entry-time,
.js .content .home-top a .entry-time {
  background-color: #e8554e;
  bottom: 24px;
  color: #fff;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 300;
  padding: 5px 10px;
  position: absolute;
  right: 0;
}

.js .home-middle a.alignleft,
.js .home-top a.alignleft {
  margin: 0 24px 24px 0;
}

.js .home-middle a.alignright,
.js .home-top a.alignright {
  margin: 0 0 24px 24px;
}

.js .home-middle a.alignleft img,
.js .home-middle a.alignright img,
.js .home-top a.alignleft img,
.js .home-top a.alignright img {
  margin: 0;
}

.entry-image-link {
  position:relative;
  display:block;
}

time {
  position:absolute;
  top:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="post-810 post type-post status-publish format-standard has-post-thumbnail category-fashion entry home-top" itemscope="" itemtype="https://schema.org/CreativeWork">
  <header class="entry-header">
    <a class="entry-image-link" href="http://example.com" aria-hidden="true"><img src="http://placehold.it/720x450&text=Image" class="alignleft post-image entry-image" alt="ALT" itemprop="image" width="750" height="420"><time class="entry-time" itemprop="datePublished" datetime="2017-09-21T21:13:24+00:00">September 21, 2017</time></a>
    <h2
      class="entry-title" itemprop="headline"><a href="http://example.com" rel="bookmark">Entry Title</a></h2>
      <p class="entry-meta"> by <span class="entry-author" itemprop="author" itemscope="" itemtype="https://schema.org/Person"><a href="http://example.com" class="entry-author-link" itemprop="url" rel="author"><span class="entry-author-name" itemprop="name">authorname</span></a>
        </span>
        <span class="entry-comments-link"><a href="http://example.com/#respond">Leave a Comment</a></span> <a class="post-edit-link" href="http://test.dev/wp-admin/post.php?post=810&amp;action=edit">(Edit)</a></p>
  </header>
  <div class="entry-content" itemprop="text">
    <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create ... <a class="more-link" href="http://example.com">Continue Reading</a></p>
  </div>
</article>