For website:
http://68.50.243.1/wunhopkuendo/
I am trying to make the image carousel show UNDER the green banner on the top left. If I set z-index on the carousel to -1, the left/right buttons don't work. However if I set z-index to 999999 on the banner, it does not appear over the carousel. How can I accomplish this? Thanks!
JS Fiddle located:
http://jsfiddle.net/3ZSBh/
Just add position: relative for the image.
<a class="brand" href="#">
<img src="http://68.50.243.1/wunhopkuendo/img/logo.png"
style="z-index: 99; position: relative;" />
</a>
The reason behind this is, the z-index works only on positioned elements, that are not static.
Fiddle: http://jsfiddle.net/3ZSBh/1/
The 'z-index' tends to work on elements that have the same type of position applied.
http://jsfiddle.net/CqnH4/1/
You can apply the following to your CSS:
.navbar {
position:relative;
z-index:999;
height: 50px;
background:#ff0;
}
#content{
position:relative;
z-index:1;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
This would keep the navbar on top of the content...of course, you don't need to specify a z-index of 999...you could simply go with a value of 2.
Related
I've got this gallery I'm currently building, and I'm trying to work out how to get my images to fill their containers.
I don't mind if they're cropped a little, I just would like them to fill the the full height and width of their parent element .thumb.
My HMTL looks like this:
<ul class="thumbs">
<li class="thumb">
<img src="/img.jpg">
</li>
...
</ul>
And my CSS like this:
.thumbs .thumb {
background: red;
height: 33.5294118%;
float: left;
width: 50%;
overflow: hidden;
z-index: 0;
}
I've got a demo set up over here: http://codepen.io/realph/pen/hjvBG
If anyone could point me in the right direction, I'd really appreciate it.
Thanks in advance!
Try adding .thumb a to your .thumb img definition (so the a element is 100% width as well) - you may also have to make one or both (a/img) tags display: block and height 100% as well
You can try adding a class to the img element, like:
<img src="/img.jpg" class="img-class">
and the css.
.img-class{ width:100%; height: 100%; }
I'm creating a css dropdown menu with css3. After that navigation, the page has a slideshow. the problem is when I'm hovering the dropdown menus, it's going under the slideshow, as a result the dropdown items can't be seen.
I don't know where to fix, navigation or slideshow ?
Here is the code for slideshow:
.sp-slideshow {
position: relative;
margin: 10px auto;
width: 100%;
max-width: 1000px;
min-width: 260px;
height: 360px;
color:#000;
Try adding z-index to both the slideshow wrapper and the menu.
and example would be:
HTML
<div class="nav">
</div>
<div class="content">
<div class="slider">
</div>
</div>
CSS
.nav{
z-index:100;
}
.slider{
z-index:80;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Hope this helped, Let me know if it didn't.
Cheers Marco.
It's hard to help you, without any markup and just a few lines of CSS, but try to apply z-index to the dropdown menu.
dropdown class or id {
position: relative or absolute;
z-index: 1000;
}
I'm having problems working out the z-index order for an application we're working on, i have two root parents, a nav bar and a map, and one child, the map tooltip. The navbar should be visible above the map, so it has a higher z-index, but the problems is to make the tooltip in the map container to be displayed over the sidebar as well, a bit hard to explain, so you can visualize the case on http://jsbin.com/afakak/2/edit#javascript,html,live :
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
Thanks for any help.
If #map-container is positioned (i.e. not static), this is not possible, because of the way z-index is compared:
body (or any other positioned parent element) is the reference for both #map-container and #nav-bar. Any z-index you give them is calculated in respect to the parent element. So the one of the 2 elements with the higher z-index will be rendered above the other one and all its child elements. Z-index of #tooltip will only be compared with other children of #map-container.
You could do as Nacho said and statically position #map-container. You can simulate fixed positioning via Javascript, if you like.
If you cannot do that, you need to change your markup, so that #nav-bar and #tooltip have a common positioned parent element. Either move #nav-bar inside #map-container, or #tooltip out of it.
Below solution should work but I don't know if you have a requirement like keeping nav-bar outside map-container. If so I don't think that there is a workaround for that.
CSS:
#tooltip-helper{
position:relative;
/*below properties are to demonstrate the helper*/
width:10px;
height:10px;
background-color:green;
top:200px;
left:200px;
}
#tooltip
{
position:absolute;
top:10px;/*this is just to make sure helper is visible*/
left:-100px;/*this is to center the tooltip*/
width: 200px;
height: 200px;
background-color: yellow;
color: black;
padding: 10px;
z-index: 15;
}
HTML:
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip-helper">
<div id="tooltip">This is the Tooltip</div>
</div>
</div>
You have to absolutely position nav-bar and tooltip (otherwise z-index won't be taken in account), and maintain map-container static positioned
#map-container{
...
position: static;
...
}
#nav-bar{
...
position: absolute;
}
#tooltip{
...
position: absolute
}
I think the only way you can do this with a position: fixed on the #map-container is to restructure your tool tips to display outside the #map-container. So on click of the icon "inside" the map container, the tool-tip itself is displayed above both (with a proper z-index set).
<div id="nav-bar">
The nav bar
</div>
<div id="map-container">
This is the map container
</div>
<div id="tooltip">
This is the Tooltip
</div>
After going through, your codes, i noticed this.
#tooltip{
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
Your #tooltip has a z-index, but it's not positioned. Z-index property will only work if it's has one of the position property value. And considering you want the tooltip to stand out, you should use the absolute position value like this.
#tooltip{
position: absolute;
background-color: yellow;
width: 200px;
height: 200px;
color: black;
padding: 10px;
z-index: 15;
}
HTML
<div id="map-container">
<div id="nav-bar">
The nav bar
</div>
This is the map container
<div id="tooltip">
This is the Tooltip
</div>
</div>
This keeps the #tooltip on top....
For future readers with similar problems -
If your conflicting child items are position: fixed, consider setting the height of the parent containers to 0px, and then shifting any parent background display settings onto a mutual grandparent of the conflicting children.
This solved my analogous delimma.
If, in the real page, the tooltip has to be shown only on hovering the map container, you could just change dynamically its z-index like so:
#map-container:hover
{
z-index: 16
}
Otherwise you need to change the position of the tooltip so that the nav-bar doesn't overlap it.
Newb question. I'm trying to use z-index, but it doesn't seem to be working the way I would expect. Here's my code:
<a id="favoritelink" href="#" style="margin-left: 600px" class="addtofavorites" title="Add to Favorites"></a>
<div class="description" style="margin-top: -18px">
Some description
</div>
In css, I have specified a z-index for .description as 1 and for .addtofavorites as 10. #favoritelink has a background image and text that is shifted way off the page (it is essentially an image link). The background of .description still sits on top of the background for .addtofavorites.
I want the .addtofavorites background to be on top.
Here's the css for .addtofavorites and for .description:
.description
{
background:#efefef;
width:600px;
max-height:500px;
padding:12px;
z-index:1;
}
.addtofavorites
{
background:url(img/plus.png) no-repeat center;
background-size:75%;
display:block;
text-indent:-9999px;
width:51px;
height:56px;
margin-right:6px;
z-index:10;
}
You have to use position: relative or position: absolute for z-index to work.
Edit: http://jsfiddle.net/GndRj/4/
Based on your code, but added position: relative and reduced margin-left on .favoritelink so that it shows up in the preview window.
Yes, I know doesn't work with position absolute, but is there a way to display elements "below" (after in code) not behind them?
Example:
<img src="image.jpg" style="width: 500px; height: 400px; position: absolute; top: 0;" />
<h2 style="padding: 15px" >This text is behind not below the image</h2>
Is there a way of displaying the h2 below the image excepting positioning it absolutely too?
Example:
http://jsfiddle.net/fDGHU/1/
(yes, I have to use absolute in my case, and dynamic margined content below, and I'm lost :D)
The only way I was able to do what you are asking is setting the top property of h2, aka positioning the text after the image. Fiddle.
PS: position:block doesn't exist. Only absolute, relative, static, and fixed.
For h2:
specify a top margin equal to the height of your image.
eg.
img {
position: absolute;
top: 0;
}
h2 {
margin-top: 400px;
padding: 40px;
}
Simple , just remove position absolute . (tested)
If an object is not defined it will automatically go to the right of its neighbour or below
How about wrapping the image and the title in an absolute block? This solution puts the title after the image because h2 is a block by default and your content is still absolutely positionned.
<style type="text/css">
.wrapper{
position: absolute;
top: 0;
}
h2 {
padding: 40px;
}
</style>
<div class="wrapper">
<img src="image_url" alt="image!" />
<h2>Am I invisible? (not!)</h2>
</div>