z-index Q 55 Responses

Last post: 11 months ago | Thread started: Jun 29, 12, 9:43 a.m.

RespondNew TopicDisable Images

• pockets

  i have a div with a background image and that div also has text, is there a way to get the background image to be infront of the text ?

  think of a div with a price in it, but the price is discounted so there is a slash over the price..

  thoughts?

  Jun 29, 12, 9:43 a.m. – Permalink

• pockets

  it would have to be 2 divs?

  <div id="price">
  $99.00
  <div id="price slash">
  <img src="slash.jpg" />
  </div>
  </div>

  ?

  • I would do it this way to have full control over the z-index... Does the price need to be clickable?– ideaist1/2

    it has a mouse over effect for details, clicking it has a jquery detail page
    – pockets2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJun 29, 12, 9:46 a.m. – Permalink

• BabySnakes

  <div style="position:relative;">
  $99.00
  <img src="slash.jpg" style="position:absolute; top:0; left:0;z-index:10;"/>
  </div>

  but put them in classes...inline style for show only

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJun 29, 12, 9:51 a.m. – Permalink

• elahon

  I would do:

  <div id="price">
  <p>$99</p>
  </div>
  <div id="price-tag">
  </div>

  CSS

  #price {
  position: relative; z-index: 1;
  }
  #price-tag{
  position: absolute; z-index: 10; background: url(../images/price-tag.jpg) top left no-repeat;
  }

  • <– ideaist

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJun 29, 12, 9:52 a.m. – Permalink

• pockets

  thank you, got it...

  cheers, happy friday

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJun 29, 12, 10:02 a.m. – Permalink

• pockets

  

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earJun 29, 12, 10:25 a.m. – Permalink