Elements on top

HTML & CSS
1

Hi all,
im having issues searching for this trick, english is not my how language, and dont know the correct term to search for

I want to put something like duct tape on top of each thumbnail in a gallery of thumbnails

my code look like this

<div class=“thumbgallery”>
<a href=“#”><img src=“img/1.jpg” alt=“” /></a>
<h3>Lorem <span> ipsum</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p>

i was trying to do so in the header, giving the idea that it was holding the menu, mess with z-index and position but cant get the image to appear on top

2

Hi,

If I understand what you want you could do something like this with a background image on a parent.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.gallery {
	background:red;
	position:relative;
	padding:20px;
	float:left;
	z-index:1;
}
.gallery img {
	position:relative;
	z-index:-1;
}
.sticky {
	padding:25px;
	background:url(images/stickytape.png) no-repeat 100% 5px;
}
.sticky a { display:block }
</style>
</head>

<body>
<div class="gallery">
		<div class="sticky"><a href="#"><img src="images/zimg6.jpg" width="300" height="300" alt="Sky"></a></div>
		<h3>Heading goes here</h3>
</div>
</body>
</html>

Or you could add a span and do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.gallery {
	background:red;
	padding:20px;
	float:left;
}
.gallery img {
	position:relative;
	z-index:-1;
}
.sticky{
	position:relative;
	z-index:1;
	zoom:1.0;
}
.sticky span {
	background:url(images/stickytape.png) no-repeat 0 0;
	z-index:1;
	position:absolute;
	right:-10px;/* adjust to suit */
	top:-20px;/* adjust to suit */
	width:100px;/* adjust to suit */
	height:55px;/* adjust to suit */
}
.sticky a { display:block }
</style>
</head>

<body>
<div class="gallery">
		<div class="sticky"><a href="#"><img src="images/zimg6.jpg" width="300" height="300" alt="Sky"><span></span></a></div>
		<h3>Heading goes here</h3>
</div>
</body>
</html>
3

Thanks i will give it a try. Guess i was doing something wrong and could not figure out the science behind. Is there any relation with z-index and position? i mean… we could not define a z-index value if we not determine a position?
thanks for your help

4

Only positioned items can have a z-index. If the element is static then you would need to add position:relative before the z-index can take effect.

A positioned element gets a default z-index of auto which basically means it has no z-index much like a static element and doesn’t take precedence in the stacking routines. IE7 and under don’t understand auto and a positioned element gets a default z-index of zero thus making it “atomic” and all its children are confined to that parent (unlike auto which will allow children to escape from the confines of their parents auto z-index).

Items with the same z-index (or children whose parents have a z-index the same as other parents) will generally be stacked according to where they come in the html with those at the end of the html being stacked on top of those that come before.

5

Thank you. My head was like “boom”. The problem was the gallery that doesnt had position defined. I know that for we to define a absolute position we have to previous define a relative position in a divisor on top of that. I read it somewhere.
CSS seems at certain point easy to learn and understand but no doubt that is a science
Good bless u

6

An absolute element is placed in relation to its nearest ancestor that has a position defined (other than static). If no ancestor exists then the viewport becomes the parent container for that absolute element. Therefore if you want an absolute element to be contained and move with another element then that other element must have position:relative defined (position:absolute will also work but then of course removes them both from the flow. )

7

understood