Place image on top of embeded object

[ryanlcs]

I have an embeded object(pdf) in my page, and I wanted to add another image on top of this pdf file, just to cover some part of the pdf file, is this possible?

Thanks.

[marcusami]

uhm not sure? try giving cordinates with CSS and use z-index


div#thisID{position:absolute; left:100px; top:300px; z-index:2; width:100px; height:100px; background-image: url('image.jpg');}


I really have no idea if it will layer over a pdf, you can give it a try though
youll have to figure out the position of left and top to locate it over whatever part of the pdf you want. and teh width and height should be the size of the image.

html will look like

<div id="thisID"></div>


I hope this helps but I am not sure

regards
Marcus

[Major Payne]

Might absolute position both image and object to keep both in same place regardless of window size. Remember, z-index as indicated, works with absolute positioning only unless you want to use some special CSS tricks.

Ron

[WebJoel]

z-index works with relative position also. Z-index requires one of either position:relative; or position:absolute; to work. It won't work in the default position:static; state.
In likelihood if the overlay image is presentational and fairly small-ish, you'd want to position:relative; the *pdf to the page or document and then, absolute-position the smaller inside & over-top of it. That is what absolute-position is best at, positioning items that will be 'layered' over another item.

[Major Payne]

I was going by what w3schools (http://www.w3schools.com/CSS/pr_pos_z-index.asp) said about the z-index, so guess they need to correct their information:

Definition

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

Note: Z-index only works on elements that have been positioned ( eg position:absolute; )!

Inherited: No

The w3c (http://www.w3.org/TR/REC-CSS2/visuren.html#z-index) said Applies to: positioned elements, but their example gives an absolute positioned element.

Guess I'll have to find the time to do both and see which works. Hope both.

Ron

[felgall]

Why go by what w3schools says. They are just as likely to be wrong as any other web site and their info is getting more and more out of date since the guys that run it don't seem to be making any effort to keep it properly up to date (which admittedly would be a huge task better suited to a business rather than a couple of individuals).

The W3C site always has the right info because it belongs to the body that sets the standards.

[WebJoel]

Definition

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

Note: Z-index only works on elements that have been positioned ( eg position:absolute; )!

Inherited: No The etymology of "e.g." is from the Latin "exempli gratia". "for instance" or "such as". The example given by W3CSchools is just one of the two available options (and possibly "position:fixed;" but I have never needed to z-index a "fixed" before, so am not certain of the results).

This lax of verbose & explicitly stating all the facts is (imho) as big a problem with W3C-Schools as their occasional incorrect, oft-deprecated or benignly misleading information.

As for the 'negative stack orders' part... some browsers (mostly non-IE ones) balk or used-to-balk at negative z-indexes. And since it doesn't hurt to merely style all z-indexes with substantive positive integers (with "z-index:0;" being the default), -it is more cross-browser and this is what we're all striving for these days.

I've seen situations though, whereby children elements seemingly don't behave as expected, despite the non-inheritence rule. I don't recall the situtation that trips this, -it might be when combined parent-child elements are relative/absolute positioned, then, the z-indexes sort-of get trippy...

[WebJoel]

Definition

The z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

Note: Elements can have negative stack orders.

Note: Z-index only works on elements that have been positioned ( eg position:absolute; )!

Inherited: No The etymology of "e.g." is from the Latin "exempli gratia". "for instance" or "such as". The example given by W3CSchools is just one of the two available options (and possibly "position:fixed;" but I have never needed to z-index a "fixed" before, so am not certain of the results).
This lax of verbose, explicitly statd facts is (imho) as big a problem with W3C-Schools as their occasional incorrect, oft-deprecated or benignly misleading information. Although having said that, I was touring that site the other day and it is a repository of alot of otherwise good facts.

As for the 'negative stack orders' part... some browsers (mostly non-IE ones) balk or used-to-balk at negative z-indexes. And since it doesn't hurt to merely style all z-indexes with substantive positive integers (with "z-index:0;" being the default, non-stated z-index), -it is more cross-browser and this is what we're all striving for these days.

I've seen situations though, whereby children elements seemingly don't behave as expected, despite the non-inheritence rule. I don't recall the situtation that trips this, -it might be when combined parent-child elements are relative/absolute positioned, then, the z-indexes sort-of get trippy and unexpectedly 'overlap' where you'd think that this shouldn't happen...