CODEWITHSUNDEEP
javascripthtmlcssimagepositioning
TIMEX
TIMEX

Reputation: 272274

How do I do this absolute positioning in CSS?

<div id="container" style="float:left;">
        <img src="{{ p.sizes.2.url }}" width="200" height="auto">         
        <div class="trans_caption" style="position:absolute;background-color:#cccccc;">
             Picture Caption
        </div>
</div>

How do I overlay the caption on top of the picture...but aligned on the bottom? Also, I want the caption width to be the same as the container. I tried to do width:100%, but it didn't work...

Upvotes: 1

Views: 366

Answers (6)

anon
anon

Reputation:

Absolute positioning means that the element will be positioned at a specific spot on the last parent that is not positioned with the default, position: static.

Relative positioning is the same as static, except:

  • The Left, Right, Top, and Bottom nudge the positioning from their normal "static" position, and
  • Absolutely positioned elements will be positioned inside it.

All of that is to say that if you position your container as relative, the absolute positioning of the trans_caption will be in affect relative to your container, where now it is positioned relative to a more higher level container.

Also, absolute positioning will place your element at top: 0; left: 0; unless otherwise specified. You need to position your caption at bottom:0; to force it to the bottom of your container.

Your trans_caption will normally default to 100% width because <div> is a block-displayed element, so it makes sense that it didn't do anything with the example you've provided. This isn't the case with absolutely positioned items, however, so keep that line. If you then center the text within that <div> by styling it with text-align: center;, it should look the way you expect.

Upvotes: 1

PleaseStand
PleaseStand

Reputation: 32112

  1. You need to set position: relative on #container. That will make the absolute positioning relative to the edges of that container div.

  2. Add bottom: 0; to .trans_caption to make the baseline (not the exact bottom) of the text aligned with the bottom of the picture. Increase that number if you want to move the text higher up.

  3. Add width: 100% to .trans_caption to make it as wide as its container.

  4. If you want to center the caption, add text-align: center; to .trans_caption.

  5. Note that the auto value for an image's height attribute is not valid.

It's best to keep the CSS separate from the HTML markup, in a separate file. What we have now would be (try it out):

#container {
    float:left;
    position:relative;
}

.trans_caption {
    background-color:#cccccc;
    bottom:0;
    position:absolute;
    text-align:center;
    width:100%;
}

Upvotes: 1

aefxx
aefxx

Reputation: 25279

<style>
    div#container {
        position: relative;
        float: left;
    }

    div#container div {
        position: absolute;
        bottom: 0;
        background: #ccc;
    }
</style>

<div id="container">
    ....

Upvotes: 1

Tom
Tom

Reputation: 30698

<div style="position: relative; width: 200px;">
   <img src="" />
   <div style="position: absolute; bottom: 0;">
       <!-- caption text here -->
   </div>
</div>

Upvotes: 1

Maksim Vi.
Maksim Vi.

Reputation: 9235

Is that what you are looking for?

Just set position:relative in your main div - it will allow to position inner div relatively to the main div, and set bottom:0 in your inner div to position it on the bottom. Small hack with float:left and width:100%, without float width:100% doesn't seem to work properly.

Upvotes: 1

Aishwar
Aishwar

Reputation: 9724

I think what you want to do is set the css background property on the container.

Something like this

<div id="container" style="float:left; width:200px; height:100px; background:url('{{ p.sizes.2.url }}') no-repeat; position:relative">
<span style="position:absolute;bottom:0px">Caption goes here</span>
</div>

Upvotes: 0

Related Questions