absolute positioned from the bottom of the div

Question

I want to overlap text and imagery using absolute positioning on the text 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;
}

I am using bottom: -50px; but that is from the top of the text div. I want it to be applied from the bottom of the text div (its height is dynamic)

EDIT: I want to display text over the image but not all the text. I want it to be partially over the image and partially off (bottom-right with overhang) I want to control it from the bottom so that I can control how much sticks out past the bottom

Can you explain more what do you want to do? – Liam Dec 17 '17 at 06:39 — Liam, Dec 17 '17 at 06:39
Edited my question, hopefully makes more sense – user3550879 Dec 17 '17 at 07:29 — user3550879, Dec 17 '17 at 07:29

Temani Afif · Accepted Answer · 2017-12-18T06:56:56.507

Simply think on the image instead of the text, and add to the image margin-bottom:-50px (which will be the same as the bottom:-50px) and simply use position relative, no need of 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>

score 0 · Answer 2 · answered Dec 17 '17 at 06:44

It's a little difficult to understand exactly what you are looking to achieve, but it seems like you are wanting to display text over the image. If that is the case, there is a solution already on Stack Overflow here.

First, you would not use id's for this solution. Id's can only be used once, which does not allow you to reuse your css styling for anywhere else on your webpage. You would need to change id to class, as classes are reusable. Great article here that gives some solid detail between the two.

Looking at your code, here is one direction you can take:

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>

Close, I want to display text over the image but not all the text. I want it to be partially over the image and partially off. I want to control it from the bottom so that I can control how much sticks out past the bottom — user3550879, Dec 17 '17 at 07:27

score 0 · Answer 3 · answered Dec 17 '17 at 06:52

0

First the position:absoluteattribute consider taking the position from parent element location. Although see the snippet I hope it will work for you.

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

answered Dec 17 '17 at 06:52

Kashif Arain

21
3

Solid answer, but I want some of the text off the image. Offset overlay of the text, which is why I have negative value on the text div – user3550879 Dec 17 '17 at 07:29
You can try experimenting with just bottom and left properties or use padding or margin. This will solve the problem but it not considered a best practice. – Kashif Arain Dec 17 '17 at 13:17

score 0 · Answer 4 · answered Dec 17 '17 at 08:16

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>

absolute positioned from the bottom of the div

4 Answers4