Overlap Text Box with Image

HTML-CSS
1

Hi, I’ve been trying for about an hour to get a text box to overlap with an image. The platform I’m currently using allows me to set the margin as -150 to get it to overlap in the one direction (ie image on left, textbox on right), but when I try to reverse this (ie the textbox on the left with the image on the right), the image overlaps the text.

I read somewhere to use the z-index: -1 but that didn’t work.

Any other ideas?

FYI, this is what I’m TRYING to achieve.

image
image1920×957 114 KB

Please put me out of my misery! :smiley:

2

Hi there!

You need to post your live code link here.

3

Use z-index: 1000; for text container.

5

@hasanzaib1389 Thank you. I managed to get that to work, but then it affects all of the other blocks on the page.

This is the code I used:

.DbOIA {
display: flex;
flex-direction: column;
grid-column: 7 / 13;
align-self: flex-start;
z-index: -1;
}

(the .DbOIA I got when I inspected the page source)

But then if I substitute it and use the custom ID (provided within the platform element - not changeable), I add the same code and it does nothing.

.image-aca5c4c4 {
display: flex;
flex-direction: column;
grid-column: 7 / 13;
align-self: flex-start;
z-index: -1;
}

Confused AF.
Any other ideas?

6

Try this:

.DbOIA {
  display: flex;
  flex-direction: column;
  grid-column: 7 / 13;
  align-self: flex-start;
  z-index: 1; /* Set this higher to be on top */
  position: relative; /* Ensure this is set for z-index to work */
}

And this:

.image-aca5c4c4 {
  display: flex;
  flex-direction: column;
  grid-column: 7 / 13;
  align-self: flex-start;
  z-index: 0; /* Lower value to be behind the text */
  position: relative; /* Ensure positioning is set */
}
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.