/    Sign up×
Community /Pin to ProfileBookmark

Positioning of overlapping images

Copy linkTweet thisAlerts:
Dec 01.2005

I want to have one image displayed on top of another, and am using absolute positioning, see example below. Which image is on top is determined by the order of scripting. It works fine, but is it safe? Will the right image always be on top, independent on the browser, settings, etc>
Thanks.

////////////////////////////////////////////
<html>
<head>
<style type=”text/css”>
h2.pos_Inside
{
position:absolute;
left:100px;
top:40px
}
h2.pos_Outside
{
position:absolute;
left:10px;
top:30px
}
</style>
</head>

<body>
<h2 class=”pos_Outside”><img src=”BigImage.JPG”></h2>
<h2 class=”pos_Inside”><img src=”SmallImage.jpg”></h2>
</body>

</html>

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@gommer683Dec 01.2005 — You could work with z-indexing. This works exactly like layers in photoshop or other programs you just need to specify what layer each picture lays on. For instance

z-index: 2; would appear on top of a

z-index: 1;

www.tizag.com/cssT/layers.php has an indepth look at this concept.

Hope this helps
Copy linkTweet thisAlerts:
@notageekauthorDec 02.2005 — Thanks, this z-index looks much more reliable than just scripting order.
Copy linkTweet thisAlerts:
@notageekauthorDec 02.2005 — I used z-index, and it works fine when I test it in Fire Fox. Unfortunately it doesn't seem to work in Internet Explorer: instead of overlapping images I get them displayed side by side. IE works OK when I don't use z-index, and rely on absolute positioning and the order of scripting. Is there any way to fix this, or IE just doesn't support z-index ?
×

Success!

Help @notageek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...