div 标签的放置不起作用答案

【问题标题】：Placement of a div tag does not workdiv 标签的放置不起作用
【发布时间】：2017-01-26 22:23:59
【问题描述】：

我正在研究我的作品集。我这里有这个页面：

第一张照片上有日期。我想要底部的文字，如下所示：

但我无法放置该文本。每次我添加一个 div 标签并在文本中设置时，它都会超出图片的范围。我猜它是一个 div 标签，必须在某个地方？

<div class="portfolio logo" data-cat="logo">
   <article class="block-thumbnail">
   <a href="#" class="block-thumb">
      <div class="date">
         <span class="day">10</span>
         <span class="month">aug</span>
         <span class="month">2016</span>
      </div>
   </a>
   <div class="portfolio-wrapper">
      <div class="portfolio-hover">
         <div class="image-caption">
            <div class="col-md-4 col-sm-6 col-xs-12">
               <h2>link</h2>
            </div>
         </div>
         <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
      </div>
   </div>
</div>

【问题讨论】：

使用您在此处发布的代码，我看到图像上的文字“链接”。那里没问题。你面临的问题是什么。另外，不是在您在此处发布的代码中，而是在您网站上的 HTML 标记中，我发现了这个：<div class="image-caption" style="overflow: hidden; display: none;" 这就是您在网站上看不到图片上的文字的原因。

标签： html css

【解决方案1】：

如果我们谈论的是 h2 元素，该 html 标记位于默认隐藏且仅在悬停时出现的元素内。

我会把它移到 .image-caption div 之外

    <div class="portfolio-wrapper">
        <div class="portfolio-hover">
            <div class="col-md-4 example col-sm-6 col-xs-12">
                 <h2>link</h2>
            </div>
            <div class="image-caption">
            </div>
            <a href="services.php"><img src="img/portfolios/logo/5.jpg" alt="" /></a>
        </div>
    </div>

并给它那些样式

 .example {
        position: absolute;
        bottom: 0;
        z-index: 1;
        text-align: center;
        left: 0;
 }

调整底部和左侧值以匹配您的设计定位

【讨论】：

你好。谢谢您的回答。当 h2 标签仅在悬停时出现时，可能有点不清楚。文本实际上应该没有悬停。这意味着当您只看到图片时，没有悬停的文本应该在那里。我只是试着玩弄你的代码，但我还没有得到任何好的结果
您好，我更新了代码以显示我建议的 html 中的更改并添加了一个自定义类，这在您的 portoflio 中适用于我
你好。我想也许我们在旁边说话？我希望文字不在悬停上，而文字就在图片上。

【解决方案2】：

您必须为您的图像标题类创建一个 css，该类将处于绝对位置，这意味着它可能与其他事物发生冲突。这应该可以帮助您：Position absolute but relative to parent。然后确保你的 z-index 正确，所以它不在图像后面

【讨论】：