42 users online (1 members and 41 guests)  

Thread: Z-index


  Results 1 to 9 of 9

Related

  1. html index collapse    Forum: HTML Forum
    Replies: 0
  2. Z-Index not working with IE.    Forum: Myspace Forum
    Replies: 1
  3. Z-Index not working with IE.    Forum: CSS Forum
    Replies: 1
  4. Index html?    Forum: HTML Forum
    Replies: 11
  5. index.html    Forum: General Discussion
    Replies: 2
  1. #1
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Post Z-index

    I'm having severe trouble with the z-index property.

    This is an example of my code:

    <img src="circle1.gif" style="z-index: 2"><img src="circle2.gif" style="z-index: 1;
    position: absolute; left: +50px">

    Now, according to everything I have read in books and on the Net, 'circle2' should shift over to the left, but because it has a lower z-index it should be occluded by 'circle1'.

    Its not. I have tried IE5,IE5.5,IE4,NN6 and Opera 4.

    Makes no odds at all.

    Its really starting to annoy me. I have been trying all day to get this right. Does anyone here have any ideas?

    Cheers.

    ------------------
    QuietDean-

  2. #2
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Post

    hmmmm, I cant help ya....you are my CSS guy!

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Post

    Fair enough. lol.

    Back to the drawing board

    ------------------
    QuietDean-

  4. #4
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Post

    Dean, If you have not yet tried this link:
    http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/zindex.asp

  5. #5
    Brothercake's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2001
    Posts
    10

    Post

    The thing with z-index is that it basically only applies to absolutely positioned elements. If you want one image superimposed on top of the other, you must specify thw absolute position of <b>both</b> of them

  6. #6
    Brothercake's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2001
    Posts
    10

    Post

    eg:

    <img src="circle1.gif" style="z-index:2; position;absolute; top:50px; left:0px"><img src="circle2.gif" style="z-index:1;
    position:absolute; top:50px; left:50px">


  7. #7
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662

    Post



    Well I'll be ********!

    It works!

    Brothercake, I like you.

    I did try absolute, but only on one of the elements. Dagnamit.

    Also, that lying reference book I read told me relative was fine.(Sound of grinding teeth)

    Cheers for that, and gratitude.

    PS is your screen name a reference to Terry Pratchetts book 'Reaper man'?

    [This message has been edited by Dave (edited 02-01-2001).]

  8. #8
    Brothercake's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2001
    Posts
    10

    Post

    I've never read any Terry Pratchett so I dunno - what's the reference?

    My mates call me Cake, and I used to go by that name when I was gigging a lot, but then a tedious indie band came along with the same name and I had to find a different one. Hence, brothercake was born!


  9. #9
    Micowick's Avatar
    New User

    Status
    Offline
    Join Date
    May 2006
    Posts
    1

    Re: Z-index

    Lol, I had the same problem, except for some reason, my browser worked with the position:relative. I am also using IE. The other problem I had as trying to alter the z-index with javascript

    it went something like
    Code:
    function appear (amount)
    {
    var x = document.getElementById ('img')
    x.style.zIndex+=amount
    }
    eventually I found a typo sad...



Tags for this Thread