Inputting content on Page

  • NollieHeel

    (@nollieheel)


    11 years ago

    Hi all-
    I don’t understand why if I were to create a <p> tag with some text on a page, then add an image, why even if I change the z-index of the image, why does it move the image downward, the more text I add in the <p> tag above it?

    For example:

    <p> Some text text text text text text text text text text text text text text text text text text text text</p>
    <img />

    If I were to keep on adding more content between the <p> tags, the <img> tag still moves down, even though I changed it’s z-index to be in front of the ‘text text text’ stuff.

    I know this is a simple problem..any help appreciated though!

Viewing 7 replies - 1 through 7 (of 7 total)
  • CrouchingBruin

    (@crouchingbruin)

    If you want elements to “stack” on top of one another, you need to set their CSS position attribute to absolute. See here.

    So you want your text to be hidden by the image?

    Thread Starter NollieHeel

    (@nollieheel)

    Not exactly hidden, I have a menu that has png’s, so it sits ‘behind’ the menu element

    Thread Starter NollieHeel

    (@nollieheel)

    (you can still see some of the text behind it)

    CrouchingBruin

    (@crouchingbruin)

    Ah, OK. One of the common ways to put an image behind text in those types of cases is to set the background-image property of the containing element. For example, if your menu items are all list elements containing anchor tags, you can set the background-image property of the list element (LI) and not have to worry about z-index.

    Thread Starter NollieHeel

    (@nollieheel)

    well in this case its the other way around kinda..
    basically it’s an image with transparency, sitting in front of a block of text.

    I guess the kernel of my issue here is, basically positioning contents on a page, be it image or text, with regards to the order in which I input (them) on the page – I could input the <p> before the <img> tag, and then with css can make the <img> content appear before the <p> tag. I feel like that’s doing things the ‘long’ way though.

    I’m still a bit confused as to why, per my example in my first post, why adding text would affect the <img> despite the <img> being on a different ‘layer’.

    CrouchingBruin

    (@crouchingbruin)

    I’m not sure you can think of z-index as defining a layer, it just used to determine which elements go on top of one another in case of an overlap. You don’t have to define z-index in order to overlap elements. If the z-index is not defined, and position is set to absolute for two elements, then whichever element is defined last displays on top in the event of an overlap. z-index is just used to override this default behavior.

    Thread Starter NollieHeel

    (@nollieheel)

    ah I see. thanks for clarifying that!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Inputting content on Page’ is closed to new replies.