放置div标记不起作用
放置div标记不起作用
提问于 2016-09-04 17:26:29
我正在写我的作品集。我有这个页面：
第一张照片上有日期。我想在底部写一段文字，就像这样：
但是我不能把那段文字放进去。每次我添加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>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-09-04 17:49:24
如果我们讨论的是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;
}调整底部和左侧的值以匹配设计的位置
Stack Overflow用户
发布于 2016-09-04 17:36:53
你必须为你的image-caption类创建一个css，它将处于绝对位置，这意味着它可能会与其他东西发生冲突。这应该会对你有所帮助：Position absolute but relative to parent。然后，只需确保您的z-index是正确的，这样它就不会在图像后面
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39315457
复制相关文章
相似问题
腾讯云开发者
