I have my code set up so when you hover over the H2 an image is revealed. Hypothetically, because the text is z-index:2 and the image is z-index:1, the H2 text should stay fixed. However, upon mouseover, the text is still being moved down to make room for the image.
I need the text to stay fixed in the same position and the background image to just appear upon hover without nudging the h2.
You can view the test here:
http://www.rorywolfseydel.com/test3-2
h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #ffffff;
z-index: 12;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #ffffff;
}
h2.three:hover img {
display: block;
z-index: -1;
position: relative;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #ffffff;
}
<center>
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>
Hypothetically, because the text is z-index:2 and the image is z-index:1, the H2 text should stay fixed. This is an incorrect assumption on how z-index works.
z-index is stacking order of elements, having a higher or lower z-index does not mean that elements with a higher z-index will automatically appear on top of each other. You need to use position for that.
For instance, two elements with different z-index values, but with position relative, are positioned relative to one another - meaning the elements affect each other's positioning, even if one has a higher or lower z-index.
Here's a simple example:
.top {
height: 200px;
background: purple;
position: relative;
z-index: 1;
box-shadow: 0px 0px 20px rgba(0, 0, 0, .5);
}
.top:hover {
z-index: 3;
}
.bottom {
height: 300px;
background: yellow;
position: relative;
z-index: 2;
}
<div class="top">
</div>
<div class="bottom">
</div>
As you can see, the elements have different z-index values, but the position is relative. If you hover the top div, you can see the box-shadow overlapping the bottom div, but the position of the elements does not change in regards to top, right, bottom, left - only the stacking order.
Now for your specific example:
Here we use position: absolute to take the img element out of the document flow, allowing you to take advantage of z-index. Since the image is now out of document flow, it no longer affects any other element around it.
The snippet below is a very simple demonstration with the position changed on the image. It probably doesn't look how you want it to, but it's a starting point.
Couple other things:
The <center> tag is obsolete. You should use text-align: center on the h2 instead.
Depending on your end goal for how you want it to look, I would consider moving the image out of the h2 tags and wrapping the h2 and img in a containing element (e.g. div). This will allow for better control over the placement of the image once it's visible.
h2 {
line-height: 68px !important;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 80px;
font-weight: 0 !important;
color: #000;
z-index: 12;
text-align: center;
}
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-left: -250px
}
h2.two a {
color: #000;
}
h2.three:hover img {
display: block;
z-index: -1;
position: absolute;
margin-top: -200px;
margin-right: -250px
}
h2.three a {
color: #000;
}
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="">
</h2>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
<!DOCTYPE html>
<html>
<head>
<style>
.artisthover {
display: none
}
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
h2.two:hover img {
display:inline ;
}
h2.three:hover img {
display:inline ;
}
</style>
</head>
<body>
<center>
<h2 class="two">
ABSOLUTELY FREE
<img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
</h2>
</center>
<center>
<h2 class="three">
BADGE EPOQUE ensemble
<img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
</h2>
</center>
</body>
</html>
Well, to set z-index on the image, the position has to be absolute for the image to stay the same, as well as the display of the outer element be inline....
Related
the top attribute appears not to be working on a html. I am trying to use the top attribute on image to move an image to the top and place above a text but the top attribute of a css never moves the image Here is snippet
<div class="stl_02">
<div class="stl_03">
<img src=""
alt=""style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
//other texts here
here are the css rules
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em,51.04167em,66.04166em,-0.041667em);
position: absolute;
pointer-events: none;
}
Please how can push the image to the top using this attribute style="top: 4.4538em;" is a challenge
Your element does have the top attribute applied. This can be seen in the following:
.stl_02 {
height: 46em;
font-size: 1em;
margin: 0em;
line-height: 0.0em;
display: block;
border-style: none;
width: 51em;
}
.stl_03 {
position: relative;
}
.stl_04 {
width: 100%;
clip: rect(-0.041667em, 51.04167em, 66.04166em, -0.041667em);
position: absolute;
pointer-events: none;
}
<div class="stl_02">
<div class="stl_03">
<img src="http://placehold.it/100" alt="" style="top: 4.4538em;" class="stl_04">
</div>
<div class="stl_view">
<div class="stl_05 stl_06">
</div>
</div>
</div>
If you are not seeing this effect, it is possible you have a rule with higher specificity overriding it, or you have cached the style before you applied this rule.
It's also worth noting that top only works on a positioned element. You need to have position: relative, position: absolute or similar on .stl-04 in order to position it with top.
Alternatively, you may be looking for margin-top, which positions vertically based on the containing element.
As an aside, basing margins off of font sizes (with em units) is generally bad practice; you should really use fixed units instead (preferably not going to so many decimal places).
Can someone please help me how to overlay my globe logo over my blue horizontal bar? Thanks! I have attached a photo of how it looks. I do not want to lose the positioning or anything.
CSS
.logo {
display: inline-block;
width: 100px;
margin-left: 100px;
margin-top: 20px;
max-height: 100%;
}
.title {
display: inline-block;
font-size: 40px;
vertical-align: top;
margin-top: 50px;
font-family: arial;
}
#bannerTitle {
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue, steelblue, white);
}
h2 {
color: white;
padding-left: 120px;
padding-top: 11px;
font-size: 30px;
}
HTML
<img class="logo" src="img/globe.png" alt="">
<h1 class="title">The Inter<span>net</span></h1>
<div id="bannerTitle">
<h2>The World Wide Web</h2>
</div>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You need to add z-index
#bannerTitle{
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue,
steelblue, white);
z-index: -1;
}
It's as matti said; you need to consider the z-index variable. What z-index does is relayer elements within the same stacking context.
From your HTML markup, I can see that your <img> and <div id="bannerTitle"> are sibling elements, so they are within the same stacking context. Therefore, whoever has a higher z-index will display on top of the other.
One way to do that is to demote the "bannerTitle" div, as matti did: z-index:-1.
An alternative way is to promote the <img>: .logo { z-index:99; }.
It's good to know that z-index only applies to block elements, and img is inline by default, but you're already made it a block element with inline-block.
I am trying to put text over an image like so:
.gallery-image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
<div class="gallery-image">
<a href="#">
<img src="image.jpg" width="280">
</a>
<h2><span>Text</span></h2>
</div>
but my text goes behind the image, what can I do to fix this?
Snippet is working for me, anyway:
Give the img a z-index: 2;
And the h2 a z-index: 3;
.container {
position: relative;
}
h2 {
position: absolute;
bottom: 10%;
background: darkgray;
padding: 1%;
color: white;
}
<div class="container">
<img src="http://placekitten.com/g/200/300" alt="" />
<h2>THIS text</h2>
</div>
Something like this? I've just styled the h2 tag, removing the need for that span tag you were using, and reducing markup.
I feel this needs some explanation.
The example is working, but if it is in fact not working for OP, he/she can use z-index but simply calling z-index on the img tag is not going to work as demonstrated here. Changing the z-index of both the image and h2 will have no effect.
z-index only works on positioned elements. Since the parent element is position:relative you can use position: inherit on one of it's children (or simply set a position). In this case the img is wrapped in an anchor tag:
<a href="#">
<img src="image.jpg" width="280">
</a>
So applying a z-index to the img tag doesn't make sense anyways. Instead add it to the a:
a{
position: inherit;
z-index: 2;
}
Now if you change the z-index values of h2 and a you will see the element with the higher z-index number come forward:
EXAMPLE
I'm having some trouble positioning my image next to my h1. The h1 is centered, and I would like to have my image placed on the right side of it. However, The position of the h1 may not be changed (thus, the image may not affect the position of the h1).
Relevant code I have so far:
<div id="header">
<h1>Header </h1><img src="pencil.jpg" alt="">
</div>
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
}
This code doesn't work at all; the image appears on the left side of the web page and is not being positioned relative to the h1 as I would like to.
I tried fixing this by putting the image into the h1 (to make it it's parent element), but by doing this the position of the h1 element changes (because the reserved space for the image is still preserved in the h1 element).
I hope someone can help me.
Kind regards,
Nick
That's because you're using a block level tag with another block level tag.
Check out W3 Schools for more info pertaining to inline VS. block level elements. :)
And if you want a more direct example using your code, here is a jsFiddle. This has it so the text is centered and the image is next to it, centered as well.
h1 {
text-align: center;
position: relative;
}
img {
position: relative;
top: 20px;
left: 20px;
display: inline-block;
}
One solution is to give #header position: relative and position: absolute to the img:
h1 {
text-align: center;
position: relative;
}
img {
position: absolute;
top: -80px;
left: 60%;
}
#header {
position: relative;
}
fiddle
You cannot absolutely position elements with position relative. You should use position absolute.
This wont resize very well though. Hope it helps. :)
img {
position: absolute;
right: 20px;
top: 0;
width: 100px;
}
Example
Since you want them right next to eachother...
Wrap the header text in a span.
<div id="header">
<h1>
<span>Header</span>
<img src="http://placekitten.com/g/400/300" alt="" />
</h1>
</div>
Set both the span and the image to display: inline-block;
h1 span, h1 img {
display: inline-block;
}
If you want the text dead center then add some padding to the left, equal to the width of the image.
h1 span {
padding-left: 36px;
}
h1 img {
width: 36px;
}
Example 1
Alternatively
Put the image inside the span
<div id="header">
<h1>
<span>
Header
<img src="http://placekitten.com/g/400/300" alt="" />
</span>
</h1>
</div>
And set it to position absolute, so it hangs out the right hand side.
h1 {
text-align: center;
overflow: hidden;
}
h1 span {
position: relative;
}
h1 img {
position: absolute;
right: -36px;
width: 36px;
}
Example 2
Neither are perfect solutions, but hopefully one will be right for you. :)
On a webpage I've got a list of thumbnails with link boxes on top of them. The are wrapped by a link tag and are clickable. However, in the link boxes on top of them which has a slightly transparent background it is only the text and not the entire box which is clickable.
This is the HTML code for one set of thumbnail and link box:
<article class="recent-post-item">
<h2>
Something
</h2>
<a href="link/to/somewhere" title="Something" class="thumb">
<img src="someimage.png" alt="Something" width="248" height="125" />
</a>
</article>
And this is the corresponding stylesheet:
#column-2 .recent-post-item {
height: 127px;
width: 250px;
position: relative;
border: none;
}
#column-2 .thumb {
margin: 0;
position: absolute;
top: 0px;
left: 0px;
}
#column-2 h2 {
font-size: 22px;
background-color:rgba(255,255,255,0.6);
padding: 5px 4px;
margin: 0;
position: absolute;
z-index: 1;
bottom: 1px;
left: 1px;
right: 1px;
}
And heres a working site showing the problem: http://fuckthepony.dk/wordpress/ (the thumbnails I'm talking about are those in the middle column)
Some people have told me that they do not experience the problem. I've tested on Linux with both Opera, Chrome and Firefox and the problem is persistent across all of these browsers.
I concur with the comments above but to make the whole transparent block clickable you would need to also take the padding off of the h2 and add the padding to the a tag instead.
#column-2 h2 {
padding: 0;
}
#column-2 h2 a {
display: block;
padding: 5px 4px;
}
This is because a elements are inline elements, so they don't take all parent's width available. You can add this rule to your css:
#column-2 h2 a {
display: block;
}
That's just because the a element has not display:block by default.
Just add this little line :
#column-2 h2 a { display:block; }