'issue with text characters wrapping around underlying image instead of overlapping

I have two overlapping elements using relative positioning. A block of text overlaps an image behind the text block element. I can get the elements to overlap but the problem I run into is when i place text within the top element, the text characters wrap around the space of the underlying image instead of overlapping it.

What I'm trying to accomplish is getting the text characters to lay overtop the underlying image instead of wrapping around it. Is there a way to get the text characters to overlap on top of the underlying image instead of wrapping? Here's the site link to see what's happening:

https://mjedev.wpengine.com/capabilities/robotic-systems-integration/

its password protected so to view it use: UN: demo PW: cead2f68da79

here's the html code:

<div class="feature odd"><img src="
" />
<div class="featurecopy">
<p>text here</p></div></div>

the CSS code here:

.feature {
    width:100%;
    margin:30px 0 60px 0;
    position:relative;
    overflow:hidden;
}

.feature img {
    position:relative;
    width:45%;
    top:0;
    z-index:1;
}

.featurecopy {
    width:60%;
    padding:30px 30px 90px 30px;
    background:rgba(228,227,224,.9);
    position:relative;
    top:60px;
    clear:none;
    z-index:10;
}
csscss-position


Solution 1:[1]

I have no idea what is causing a problem but one way you can fix this is putting exact text you want to overlap in span give it some class and then you can use position: relative; right: 5%; OR 100px; it should work but it is probably not the best practice.

Solution 2:[2]

This is how I will do it. I will add another class use the image as a background of the text so you dont have to rearrange a lot of stuff. Is this what you mean??

the CSS code here:

.feature {
    width:100%;
    margin:30px 0 60px 0;
    position:relative;
    overflow:hidden;
}

.feature img {
    position:relative;
    width:45%;
    top:0;
    z-index:1;
}

.featurecopy {
    width:60%;
    padding:30px 30px 90px 30px;
    background:rgba(228,227,224,.9);
    position:relative;
    top:60px;
    clear:none;
    z-index:10;
}

.odd1 {background-image: url('https://media.istockphoto.com/photos/tiger-picture-id871661426?b=1&k=20&m=871661426&s=170667a&w=0&h=CFMdx-lBMJcwZShfwSgpcwStrgrEjp5wu6nWTr7bu_E=');
background-repeat:no-repeat;
}

.odd1 p {color:white;}
<div class="feature odd ">
<div class="featurecopy odd1">
<p >text heretext heretext heretext here</p>
</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ne0123.
Solution 2

Related Questions