Is there an alternative to negative margins for item overlaying other item in css?

StackOverflow https://stackoverflow.com/questions/10815325

  •  11-06-2021
  •  | 
  •  

문제

i have a markup like this:

<p>Image caption</p><img />

the p is an inline block.

I want the caption to overlay the image, rather than pushing the image to the left. Ususally I do this with margin-right -"x"px;, but as I don't know what width the image caption will have, I can't use this technique. Are there any good alternatives? (the text has a background color, so I cant' use block-elemnt)

도움이 되었습니까?

해결책 5

The solutions written here were not possible for my site (although technically correct)

My solution was

<p>
    <span>Image caption<span>
</p>
<img />

and then

p{
    display:block;
    margin-right -100%;
}

some extra markup but hopefully it will help someone walking down the same path as I did!

다른 팁

Have you thought about absolute positioning the items inside a div which is relatively positioned?

For example, wrap the p and img in a div and add position:relative to the div then add position:absolute to the p and the img and left or right position those elements.

Put a div around it:

<div><p>Image caption</p><img /></div>

Specify the width of the div and allow the img to be on top of the p. You can then use padding: 0 auto; on the div to center the image.

I would wrap the p and img in a div.

<div>
<p>Image caption</p>
<img /> 
</div>

then use the below styling:

div {
  position: relative;
  float:left;
}
p {
  position: absolute;
  top: 20px;
  left: 10px;
}

you can adjust the top and left values accordingly and also use bottom or right instead of top and left if you wish.

Another alternative would be to use a fixed-size div and use your image as it's background? That way any text would be overlaid without any need to mess around with absolute and relative positioning. Mat

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top