Overlay text over <div> element

HTML & CSS
1

Hi,

I seem to be struggling with something super basic.

I’m trying to place text over an absolutely positioned element, but failing :frowning:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Test</title>	

</head>
	
<body id="PageTop">
	
<p style="z-index:1">Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet</p>
<div style="position:absolute;width:135px;height:135px;background:#333;top:5px;left:241px;z-index:0">&nbsp;</div>

</body>
</html>

Could anyone point me in the right direction?

Many thanks

2

z-index works on positioned elements only. So the easiest way to solve your problem would be to add position: relative; to the p-tag, I guess.

3

Many thanks for the quick reply and clearing that up.

Quick question however.

Why does the following not work?

What should I do to #mainarea so the grey box appears between the white background and the text?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Test</title>

		<style type="text/css">
		#mainarea {padding:20px 9px 20px 6px;margin-top:16px;width:430px;background:#fff;color:#333;}
	 	</style>
		
</head>
	
<body id="PageTop">
	  	
<div id="mainarea">
      
<div id="maintext">

	<p style="z-index:1">Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet 
	Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet 
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet 
Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet Lorem ipsum doler sit amet</p>

<div style="position:absolute;width:135px;height:135px;background:#333;top:15px;left:41px;z-index:0">&nbsp;</div>         
        
</div>
</div>

</body>
</html>

Many thanks again for the help.

4

Oh man, amateur error.

Set color and background to #333.

Runs off in shame before anyone notices

5

Everyone has off days invision2 :). Don’t think too much of your newbie mistake. Everyone has them :slight_smile: