How can I position a div relative to an image?

image position html
css position
css position: relative to parent
html image position x y
css position image
html position relative to image
positioning divs
position image in div css

I have a an image that may change its position depending on certain actions and several divs that I want to position on the img tag.

The simplified code is as follows:

<div>
    <img src="someRandomImageUrl">
    <div>foobar</div>
</div>

To better understand imagine I have an image with a small square somewhere around the center and I want the foobar message to be placed in the image square no matter where I position the image. Any ideas?

Somthing like this? http://jsfiddle.net/q0so8esf/

.imdesc {
    display: inline-block;
    vertical-align: middle;
    position: relative
}
.imdesc img {
    vertical-align: middle;
}
.imdesc p {
    text-align: center;
    background: #fc0;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px;
    border-radius: 50px;
}

How to move image within a div tag, How do I change the position of an image in CSS? The information in this tutorial can be used to position text, images, and other content on a web page. The examples were of an image. A div tag can be used (instead of an img tag) to position other content. The positioning can be exact or relative to something else. Use the positioning technique best suited to what you want to accomplish.

You could try this using absolute positioning for "foorbar":

<div class="container">
    <img class="image" src="http://lorempixel.com/400/400" />
    <div class="text">foobar</div>
</div>

.container {
    position: relative;
    display: inline-block;
}
.image {   }
.text {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5px;
    margin-top: -14px;
    margin-left: -50px;
    width: 100px;
    background-color: white;
    text-align: center;
}

JSFIDDLE DEMO

You can adjust the width, and magins as needed to center or position the text exactly where you want it. The display: inline-block for the .container forces the div.container to not span the entire width of the page and allow us to center horizontally with absolute positioning.

Need to fix an image to a specific spot on a page, . Other content will not be adjusted to fit into any gap left by the element. position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

<div class="container-wrap">
    <img class="image" src="http://lorempixel.com/400/200/" />
    <div class="text-center">foobar</div>
</div>

<div class="container-wrap">
    <img class="image" src="http://lorempixel.com/400/200/" />
    <div class="text-top">foobar</div>
</div>

<div class="container-wrap">
    <img class="image" src="http://lorempixel.com/400/200/" />
    <div class="text-bottom">foobar</div>
</div>

.container-wrap {
    position: relative;
    display: inline-block;
    margin:12px 0;
}

.text-center, .text-top, .text-bottom {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 5px;
    margin-top: -14px;
    margin-left: -50px;
    width: 100px;
    background-color: white;
    text-align: center;
}
.text-top{margin-top:0; top:0;}
.text-bottom{top:auto; bottom:0;}

CSS Layout - The position Property, An element with position: relative; is positioned relative to its normal position. Because the image has a z-index of -1, it will be placed behind the text. The image appears outside of your div because you are not clearing the float. There is a number of ways you can do this. I reccomend adding overflow: hidden to your parent div .headerphoto { z-index: 0; position: relative; margin: 0 auto; width: 760px; height: 100%; border-width:1px; border-color:#EFEDED; border-right-style: solid;

You can try using translateX(-50%) along with necessary margin-left or margin-right to center the element you wish to center with respect to an image.

#botCaptionImage{
    position: absolute;
    margin-top: 300px; /*usually height of image plus some offset*/
    margin-left: -150px;
    transform: translateX(-50%); /*Shifts half the width 
                                 of caption past the margin-left reference point*/
}

Refer to this page on using translateX

How to Position Text and Images Exactly and Relatively, Absolute Position. This method will place an image on the web page in exact position relative to the top-left of the page or relative to another positioned div  So what I'm running into is this: neither image centers horizontally unless I change their position to relative. Also, the first image centers vertically inside the whole page, not the div its contained in.

Here is HTML code. Giving u example.

     <div class="background" 
   style="background-image: url('../../img/Australia-office_2.png'); height:40%">

            <div class="transbox">
                <h3>Some text</h3>
                 <p>
                    Some text

                </p>
            </div>

        </div>

CSS::

div.background{
background-size: 100% 100%; 

}
div.transbox{
color: #000000;
text-shadow: none;
}

How to make an image position: relative ?, So if the image tag had no position on it, it would then look at .img-container and if that didn't than it would look at flex-item-divall the way up  You are close, you just need to make the image itself relative. Absolute positioned items defer to the closest parent that is relative. So if the image tag had no position on it, it would then look at.img-container and if that didn't than it would look at flex-item-divall the way up and default to body if nothing had relative positioning.

Relative div with absolute images - HTML & CSS, #content { margin: 0 auto; } .porfolio { position: relative; } .porfolio > div { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } .porfolio img { display:  Relative position: If you specify position: relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. When you specify position: absolute, the element is removed from the document and placed exactly where you tell it to go.

Absolute Positioning Inside Relative Positioning, A page element with relative positioning gives you the control to absolutely position not hang back inside like his well behaved brother from the first image. position:absolute is relative to the nearest position: relative parent. That div had no height, so it kinda had no bottom, the bottom was at the top of the page. Using height: 100% actually makes that div the same height as it content. – Derik Jul 29 '13 at 19:25

How to use the position property in CSS to align elements, As we can see in the picture, defining position: static or not doesn't position: relative : An element's new position relative to its normal position. One way is to add position: relative; to your image and then abosolute position the div according to it. That won’t work as the div is not inside the image. Absolute positioning is relative to the

Comments
  • Image cannot contain a div; put both items in a div and position that div instead.
  • Do you mean the "foobar" message should be placed on top of the image?
  • Wouldn't this center the div relative to the .container instead of relative to the .image? What if you add more elements to the container later on?