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

只需考虑图像而不是文本，然后添加到图像(to-draw render)（与底部相同：-50px）并简单地使用位置相对，不需要absloute：

margin-bottom:-50px

.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;
}

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:absolute属性考虑从父元素位置获取位置。虽然看到片段我希望它对你有用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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

In order to this you have many ways, here's the simplest one using display:flex and then set up margin-left minus to fit your layout

Here's the code:

#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>

绝对位于div的底部

4 个答案: