Floating Div Over an Image

Floating Div Over An Image

Never fails, once I post the question to SO, I get some enlightening "aha" moment and figure it out. The solution:

    .container {       border: 1px solid #DDDDDD;       width: 200px;       height: 200px;       position: relative;    }    .tag {       float: left;       position: absolute;       left: 0px;       top: 0px;       z-index: 1000;       background-color: #92AD40;       padding: 5px;       color: #FFFFFF;       font-weight: bold;    }

<div class="container">       <div class="tag">Featured</div>       <img src="http://www.placehold.it/200x200"></div>

float image over div

Negative margin to your "in beeld" .paragraph and

position: relative;
z-index: 100;

float object over an image using CSS?

What you are looking for is not what floating elements do. A floating element is still part of the document flow, and you want an element that isn't.

Use absolute positioning to take an element out of the document flow, that way it won't push other elements away and you can place it on top of other elements:

<div style="position:relative">    
  <img src="image.jpg" alt="Sample Image" />
  <div style="position:absolute;left:0;top:0;">
    This text is on top of the image
  </div>
</div>

The elements with position:relative acts as the origin for the absolutely positioned elements inside it, so that the text is placed on top of the image and not at the top left corner of the page.

How can I put a <div> over an image?

You have to use CSS for this. Basically, HTML and CSS co-exist (check the dev tools, even if you haven't given any CSS, it will be having some CSS properties).

What you might need is something like this:

figure,figcaption {  margin: 0;  padding: 0;}
figure {  display: inline-block;  position: relative;}
figure img {  display: block;}
figure figcaption {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  background-color: rgba(0, 0, 0, 0.5);  color: #fff;  padding: 10px;  border-radius: 5px;}

<figure>  <img src="https://i.imgur.com/3rcJO2J.jpg" alt="Image" width="200" />  <figcaption>Hello!</figcaption></figure>

How can I put a div over an image?

Try something like this:

<div style="position:relative;">  

  <img src = "<? echo $image_url ?>" style="min-width:220px;max-width:220px;">
   <div style="position:absolute;width:210px;background-color:black;color:white;top:0;left:0;padding-left:10px;padding-top:10px;font-size:16px;z-index:5;"><a href="LINK" ><? echo $title ?></a></div>

</div>

You had a few things going on:

1) You had a div inside an 'a' tag. You shouldn't put block level elements (like divs) inside inline level elements (like a's).

2) Remove the float from the image, set your outer div's position to relative and your inner div's position to absolute, then absolutely position it to the top of the containing div. From there, add a z-index greater than 0 to the inner div for good measure, to ensure it stays stacked above the image.

Floating a div with image results in extra space

Your images width (caused by its class .class-0-569) is 33%. But that's of its container / parent element, i.e. the floated .class-0-568 element.

Apply the 33% width to the image's parent (.class-0-568) and 100% width to the image itself:

.class-0-568 {
  float: left;
  width: 33%;
}

.class-0-569 {
  padding-right: 2%;
  width: 100%;
  height: auto;
}

.class-0-570 {
  line-height: 1.2em;
  margin-top: 0.2816004em;
}

<div class="class-0-568" id="id-0-553">
  <img alt="Sample Image" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>

Float one image over another with CSS

You need to use position: absolute if you want your images to overlap

.left-image{
    position: absolute;
    left: 200px;
}
.right-image{
    position: absolute;
    right: 200px;
    z-index: 5;
}

Edit the left and right properties above to get the positioning to your liking.

Example

---

Related Topics