• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Preventing Image Overlap

As I mentioned in the discussion of absolute positioning, you can run into situations where your images overlap. (This can even occur in relative positioning, depending on how you place the elements.) Although in some cases you might want this to happen (such as for particular design effects), you can prevent it by using the z-index attribute.

<html>
<head>
<title>Working with Cascading Style Sheets</title>
</head>
<style>
IMG {position:absolute; left:50; top: 10}
IMG (position:absolute; left:50; top:10}
</style>
<body>
<hr>
<align=center>Relative Positioning of Elements</align>
<hr>
<IMG SRC="ComputerImage.gif" STYLE="z-index: 1">
<IMG SRC="ComputerImage2.gif" STYLE="z-index: 2">
</body>
</html>


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint