SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Threaded View
-
Jun 20, 2006, 09:05 #1
- Join Date
- Sep 2004
- Location
- usa
- Posts
- 141
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
does z-index affect forward or backward?
i'm trying to construct an image gallery using modified code (below) from the dd css library, and i want to position the hover image so that it appears in a specified place, but a fluid page.
can i do this using z-index, and if so does a dive with a z-index rule of, say, 50, parent everything in behind layers (1-49) or in front layers (51+)...or neither because it depends on when/where it is called in the HTML?
and what would the position statement be? i've already tried positioning it relative, but that messes with the thumbnail layout.
Code:/* CSS Document */ <!-- Source: Dynamic Drive CSS Library --> <!-- URL: http://www.dynamicdrive.com/style/ --> .gallerycontainer{ position: relative; height: 60px; padding: 0px 4px 0px 8px; text-align: justify; z-index: 100; width: 732px; margin-left: -1px; } .thumbnail img{ border: 1px solid #ffffff; margin: 1px 1px 2px 1px; } .thumbnail:hover{ background-color: transparent; } .thumbnail:hover img{ border: 1px solid #ffffff; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; height: auto; width: auto; background-color: #f7f8f9; padding: 0px; /*b1b7cf f7f8f9 000333*/ border: 1px solid #b1b7cf; visibility: hidden; color: #000333; text-decoration: none; padding: 3px 3px 3px 3px; } /*.thumbnail span p{ color: #ffffff; text-decoration: none; margin-bottom: 12px; }*/ .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0px; margin-bottom: 3px; } .thumbnail:hover span{ /*CSS for enlarged image*/ visibility: visible; top: 0; top: auto; left: auto; /*position where enlarged image should offset horizontally */ z-index: 50; }
Bookmarks