As mentioned in the title, I want to make a vertical line in the center, under an image but over a background (just like in this example: http://www.akita.co.uk/computing-history/#decade2000). How can I do it? Thanks.
You could achief this with a pseudo-element. I'll make a quick pen to show you how but basically, you just give the image a z-index of 2, the pseudo-element parent a z-index of 1 and you're good to go.
Keep in mind that the Z-index is inherited from the parent. So by using the -1 on the pseudo-element you are saying, take the parent z-index(2), and substract 1 from that, so you end up with a z-index of 1.
.image{
position:relative;
z-index:2;
width:200px;
height:200px;
margin:0 auto;
padding-top:100px;
&::before{
content:'';
position:absolute;
width:1px;
height:300px;
top:0;
left:50%;
background:red;
z-index:-1;
}
}
Example in the pen: http://codepen.io/jan-dh/pen/VjOEyq?editors=1100#0
Can you not do this by using CSS to set the Z-index of your image? Setting a high z-index will bring it to the front of all of the other elements on your page.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
Can anyone give me a hint why the link in the gray box is not clickable in Internet Explorer (I'm using version 11).
http://jsfiddle.net/rk7n7xjj/1/
I tested it in any other browsers and it works fine.
HTML
<div class="gray">This link is not clickable in IE</div>
<div class="yellow">Some placeholder text</div>
CSS
.gray {
position:fixed;
z-index:-1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
The link is not clickable becaue of the z-index.
Actually you setting the div behind the body. You must specify the z-index of the body too. Or at least set it positiv so it's in front of the body and set other elemnts higher if you expact to display them in front of the gray div. Thats why you cant click it.
Obviously Firefox and co has no problems to identify the link when you set z-index like this.
This may helps you to understand how you can use z-index also in IE.
In your case, to get what you want, your CSS should look like:
.gray {
position:fixed;
z-index: 1;
top:100px;
background:gray;
height:50px;
width:200px;
}
.yellow {
position:relative;
z-index: 2;
margin:0 auto;
background:yellow;
height:1000px;
margin-top:400px;
}
Actually you dont need the z-index on the gray in your case but if you plan to may display something behind the gray div than you may need it.
The link is not clickable because IE is taking it behind the body. If you notice, even the text of the link is not selectable. Try setting a z-index: 1 to the body or any parent container. That ways you are first telling the browser to take all the elements inside the container to a higher z-index and then move the link behind that raised set of elements (But the movement of the link is done only within the parent's context i.e. the raised level. Read about stacking context). Thus the link now becomes clickable.
Alternate Solution
If you just want the yellow div over the gray div, then give a positive z-index to the yellow div only. Remove the z-index property from the gray div. If no z-index value is present, 0 is taken as the default. It will always stay behind the yellow div.
.yellow {
position: relative;
z-index: 1;
/* other styles */
}
I've got this image and i want to put it over my website as a foregound. It should overlap the background and the elements. I'm using CSS.
https://www.dropbox.com/s/aawxonln4h1i5dt/Snow.png?dl=0
If I understand correctly you want something like this:
Html (place somewhere on top):
<img src="URL_TO_IMAGE" id="overlay"/>
CSS:
#overlay{
width:100%;
position:absolute; /*You may also use fixed depending on your needs.*/
left:0;
top:0; /*If you want it at the bottom you probably want bottom:0 instead*/
z-index: 999;
}
Okay, I'm trying to get an image with position fixed to hide behind specific DIVs. To my understanding, this should be possible using z-index. However, I've tried everything and cannot get this to work properly.
URL: http://www.aadesigns.net/who-we-are/testimonials/
The image I'm having a problem with is the happy woman celebrating. Everything works GREAT until it gets to the bottom of the page and you'll see her overlap DIVs.
I've been in firebug for about 1.5 hours trying to figure out how to do this by manipulating z-index...
Any help would be greatly appreciated here.
EDIT* More specifically, I need the image to vanish behind the footer and the footer_bottom DIVs
Add z-index:100 to img inline style. Better convert this inline style to class like below
.testimonials img{
position:fixed;
left:50%;
margin-left:-600px;
bottom:0;
z-index:100
}
apply z-index: 100; on img
<img src="http://www.aadesigns.net/wp-content/uploads/2012/09/happycustomer1.png" alt="" title="happycustomer" style="position:fixed;left:50%;margin-left:-600px;bottom:0;z-index: 100;">
Define your #footer z-index:-1;
Add this css
#footer{
z-index:-1;
}
-------
or second option
.testimonials img{
z-index:1;
}
I have 4 divs as you see on the picture.
They are positioned this way :
<style>
div1{
max-width:250px;
min-width:240px;
position:absolute;
right:6px;
top:6px;
float:left;
}
div2{
max-width:2248px;
position:absolute;
height:35px;
left:254px;
margin-right:20px;
min-width:275px;}
div3{
max-width:250px;
min-width:240px;
position:absolute;
right:6px;
top:6px;
float:right;}
div4{
position:fixed;
top:1px;
right:400px;
margin-left:260px;}
</style>
The issue I am having is that div4 gets its content from the database, if there is more text it goes UNDER div2. and makes it impossible to read.
looking for a way to make so that if there is more text (or if you resize the browser) as text on div4 wraps, div2 is pushed down (if the width is narrowed) or pushed up (if the browser width is made wider)
any ideas?
If you want to have elements that react to other elements, then you need to use a layout method that keeps your elements in the flow. position:absolute; is like superglue, it's best used sparingly and only when nothing else sticks...
The other approach is to programmatically adjust the positioning during resize, but this is not recommended.
http://new.michaellane.com/listing-gallery.php
The yellow strips of paper you see there have this set:
.listing_specs {
width:230px;
height:140px;
background-image:url('/images/featured_listing_specs.png');
background-repeat:no-repeat;
color:#836637;
padding-top:10px;
position:absolute;
top:120px;
right:-120px;
z-index:50;
}
And the div that contains it, .listing_icons, is just a generic float:left, position:relative DIV with a z-index of only 10.
How is it that the yellow strips come underneath the .listing_icons on the right hand side?
Set z-index of all the grid_8 alpha listing_gallery_icon on the left side to 11.
Just remove the z-index from .listing_gallery_icon:
.listing_gallery_icon {
position:relative;
/*z-index:10;*/
}
Its because the div on the right its not relative for the note on the left.
try setting the right:-120px; to 0. Is that the desired effect?