绝对位于div的底部

Question

我想在文本div上使用绝对定位重叠文本和图像。

HTML

<div id="article-txt">
</div>

<div id="article-img">
</div>

CSS

#article-txt { 
min-height: inherit;
position: absolute;
bottom: -50px; right: 0;
}

#article-img { 
display: block;
position: relative;
}

我正在使用bottom: -50px;，但这是从文本div的顶部。我希望它从文本div的底部应用（它的高度是动态的）

编辑：我想在图像上显示文本，但不是所有文本。我希望它部分覆盖在图像上并且部分关闭（右下角有悬垂）我想从底部控制它以便我可以控制从底部伸出多少

Answer 1

只需考虑图像而不是文本，并添加到图像margin-bottom:-50px（它将与底部相同：-50px）并简单地使用位置相对，不需要absloute：

.article-txt {
  position: relative;
  z-index:1;
  font-size:35px;
  font-weight:bold;
  padding: 0 50px;
}
.article-img {
  display: block;
  position: relative;
  margin-top:50px;
  margin-bottom:-50px; /* control this value */
  z-index:0;
}

<div class="article-img">
<img src="https://lorempixel.com/400/400/">
</div>
<div class="article-txt">
 ipsum dolor sit amet, consectetur adipiscing elit. 
</div>

<div class="article-img">
<img src="https://lorempixel.com/300/300/">
</div>
<div class="article-txt">
 ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in ultrices elit. 
Nulla vel rhoncus dui.esent congue mi nibh, ut gravida tellus tincidunt at. Quisque commodo r
</div>

Answer 2

要确切了解您要实现的目标有点困难，但似乎您希望在图像上显示文本。如果是这种情况，Stack Overflow here.上已经有了解决方案

首先，您不会将id用于此解决方案。 Id只能使用一次，这使您无法在网页上的任何其他位置重复使用CSS样式。您需要将id更改为class，因为类是可重用的。伟大的文章here，在两者之间提供了一些坚实的细节。

查看代码，您可以采取以下方向：

CSS

img {
    display: block;
}

.thumbnail {
    position: relative;
    display: inline-block;
}

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    text-align: center;
    color: white;
    font-weight: bold;
}

HTML

<div id="box-search">
      <div class="thumbnail">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt="">
          <div class="caption">
              <h1>OATMEAL</h1>
          </div>
      </div>
  </div>

Answer 3

首先，position:absoluteattribute考虑从父元素位置获取位置。虽然看到片段我希望它对你有用。

#article-txt { 
min-height: inherit;
position: relative;
bottom: 70px;
z-index: 100;
width: 350px;
padding: 4px;
}

#article-img { 
display: block;
position: relative;
}

<div id="article-img">
<a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a>
</div>

<div id="article-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas libero vitae finibus blandit. Proin id tempus leo.
</div>

Answer 4

https://jsfiddle.net/Liamm12/xsm93jjq/1/

为此，你有很多方法，这里是最简单的使用display:flex，然后设置margin-left减去适合你的布局

这是代码：

#content{
    display: flex;
    position: absolute;
    bottom: -50px;
    right: 0;

}
#article-txt { 
    min-height: inherit;
    font-size: 20px;
    font-weight: 900;
    margin-left: -17%;
    color: black;
    margin-top: 8%;
}

<div id="content">
<div id="article-img">
<img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Instagram_new.svg" width="70px">
</div>
<div id="article-txt">
<span>Here's your text</span>
</div>
</div>