SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlay text over <div> element

    Hi,

    I seem to be struggling with something super basic.

    I'm trying to place text over an absolutely positioned element, but failing

    HTML Code:
    <!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. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    82
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    HTML Code:
    <!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. #4
    SitePoint Wizard
    Join Date
    Mar 2008
    Location
    United Kingdom
    Posts
    1,285
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man, amateur error.

    Set color and background to #333.


    *Runs off in shame before anyone notices*

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Everyone has off days invision2 . Don't think too much of your newbie mistake. Everyone has them
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •