An image ON TOP of another layer?

[varanusrudicollis]

Hey.

I'm trying to get an image (a gif) to lay on top of an iframe (that is in a div) that I have. I need it to cover the top of an ugly scroll bar.

let me know if anyone has any ideas. I wasn't sure what kind of code it would be, hence why I put it in "other"

thanks.

[rangana]

Set your image absolutely.

[boogyman]

or assign it relatively and use a z-index thats greater than the iframe... allowing it to be compliant and user friendly.

img#yada {
    position: relative;
    top: 20px;
    left: 10px;
    z-index: 5;
}

<div>
     <img id="yada" src="" width="" height="" alt="">
     <iframe>
          <noscript>Your browser doesn't support this feature, please upgrade to a newer version to see the full features of this website</noscript>
     </iframe>
</div>

[jscheuer1]

or assign it relatively and use a z-index thats greater than the iframe... allowing it to be compliant and user friendly.

img#yada {
    position: relative;
    top: 20px;
    left: 10px;
    z-index: 5;
}

<div>
     <img id="yada" src="" width="" height="" alt="">
     <iframe>
          <noscript>Your browser doesn't support this feature, please upgrade to a newer version to see the full features of this website</noscript>
     </iframe>
</div>

That code doesn't look exactly compliant to me, but I'm not sure. The noscript tag certainly isn't necessary, and being block level probably shouldn't be inside an inline element like an iframe. Plain text there should be fine.

Now, with relative position vs. absolute position, neither is more compliant than the other. However, relative position still takes up its alloted space in the layout. In this case this would 'push' the iframe over or down, creating a gap of some sort.

I'd do it like so (style in the head):

<style type="text/css">
<!-- 
#container {
position:relative;
}

#yada {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

#daframe {
position:relative;
}
 -->
</style>

Markup in the body:

<div id="container">
     <img id="yada" src="" width="" height="" alt="">
     <iframe id="daframe">
          Your browser doesn't support iframes, please upgrade to a newer version to see the full features of this website
     </iframe>
</div>

[boogyman]

thanks for the correction about noscript....

and the iframe would still need all the properties as it would normally.... aka

<iframe src="/path/to/page" width="" height="">

etcetc...

#yada {
position: absolute;
top: 0;
left: 0;
z-index: 5;
}

wouldn't that move that element to the top left of the entire viewport not of the containing element, in this case the "container" div?
sorry its been a long couple days and i should have waited another day before returning to the grind

[jscheuer1]

thanks for the correction about noscript....

and the iframe would still need all the properties as it would normally.... aka

<iframe src="/path/to/page" width="" height="">

etcetc...

I figured we were all assuming that.

#yada {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

wouldn't that move that element to the top left of the entire viewport not of the containing element, in this case the "container" div?

Ah, this is a very important aspect of style that you should (may, in fact) know. But if you don't, the answer is - Yes, in and of itself it would. However, since the container is:

#container {
position:relative;
}

It will act as a true container to the absolutely positioned image. The container could also have been absolute, and it would have the same effect, but absolutely positioning the container is not desirable in this case. In either case though, with an absolutely positioned or relatively positioned container, elements within it that are absolutely positioned are positioned 'relative' to the container's position. This, in fact is how many slide shows and scrolling effects are achieved. It will also serve well for the objective here.

[magicyte]

Yup. z-index is my only response to this post. I'm not sure, but you might be able to use a z-index with a -1 value for the divider (layer, whatev) (doubt it'll work).

-magicyte

[jscheuer1]

z-index : -1; is supposed to put the element underneath (buried within) the viewable area of the page. However, it will not position it. Someone recently wrote in these forums that you have x, y, and z axis on a web page. x is like the style left or right position, y is style top or bottom. z is the stacking, or depth. They all work together when used, and all require absolute or relative positioning (sometimes fixed positioning can be used, but it isn't as fully supported as absolute and relative are).