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;
}
Related
I am building a page HERE and I'm having trouble with the footer. I've done a lot of research looking at sticky footers and wrapping everything in containers... and my head is spinning.
The goal of the site is to display the song lyrics on the right as the title is clicked on the left, and it works miraculously well. The problem is that the footer doesn't move with the lyrics...
Your help is much appreciated!
When you used position:absolute for any element then you must add to position:relative their parent element otherwise it not work.
body {
position: relative;
padding-bottom: 50px;
}
Or If you don't want add this in body then just wrap all the divs on one parent div like .wrapper and this css in that.
<div class="wrapper">
<div class="header"></div>
<div class="banner"></div>
<div class="container clearfix"></div>
<footer></footer>
<div>
Also add clearfix class in container div because its have float element
You can fix or make a sticky footer by using CSS or you can just put this CSS for you footer.
.footer-class{
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}
Position is fixed for footer will never move in any page.
bottom 0 will fixed the footer at the bottom.
left and right 0 will placed the footer in the screen.
Width 100% will show the full width.
z-index will show at the front. Placed everything will behind the footer.
I have created simple webpage using html5 and css.
I have created sticky footer with 4 columns and each column have vertical navigation menu.
Here is my code:
<footer>
<div id="footer">
<div class="footer-column" id="footer_column1">
Home
</div>
<div class="footer-column" id="footer_column2">
about us
</div>
<div class="footer-column" id="footer_column3">
contact us
</div>
<div class="footer-column" id="footer_column4">
Blogs
</div>
</div>
</footer>
and this is for css:
#footer {
position:absolute;
clear:both;
bottom:0;
color:#000;
width:100%;
height: 50px;
background:#fff;
left:0;
}
.footer-column {
float: left; /* Push the div as far up-left as it can be put */
width: 25%; /* Make sure to subtract the padding */
padding: 10px; /* We want padding on all sides to make things look nice */
text-align:center;
}
Now page looks like : s22.postimg.org/l0l6y85o1/Untitled_1_copy.png
If i increase the height of footer, it will be hidden background of slideshow.
Can anyone help me, how to fix this. Thanks in advance.
You have given absolute positioning to footer so it will stay there, now your page is basically overlapping it. You should use relative layout for your page.
I would suggest you to use bootstrap for this. Here is a simple example or this.
Regarding z-index - If you will give higher z-index to your footer say 999999 then it will be on top (higher than other elements on page).
Z-index will not actually help you with positioning. Always something will be hidden. If you want your footer to be right at bottom of the page then do not use absolute positioning and it will be pushed down.
Try:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 100px;
}
Situation
html:
<div class="container">
<div class="parent">
<div class="child">x</div>
</div>
</div>
css:
.container {
display: table;
}
.parent {
display: table-cell;
position: relative;
}
.child {
position: absolute;
right: 0;
}
What I expect:
the .child should be positioned to the right edge of .parent. Works in Chrome.
What I get in Firefox:
the .child is positioned to the right edge of the closest "non static" parent which is has not display: table-cell.
Fiddle
http://jsfiddle.net/SYG5k/2
Question
Why does display: table-cell influence the positioning of child elements, or, why is position: relative ignored on table-cell elements? Can I work around this if I rely on table-cell?
You need to put position: relative; in your parent.
So in the code in your question add position: relative; to .container
Or in your jsfiddle add position: relative; to .parent
.parent {
height: 150px;
width: 450px;
display: table;
margin-top: 400px;
background: #bbb;
position:relative;
}
Related : Firefox ignores absolute positioning in table cells and Positioning context on table-cell element in Firefox
About your questioning 'why' : It's no more a 'block' level element. It's a table-cell so positioning will behave in a different way (in this case, with firefox).
See this to understand deeper about 'tables' behaviors
http://jsfiddle.net/SYG5k/12
Add a wrapper to your absolute element and make it relative, so you will have something like table-cell > relative wrapper > absolute element
http://jsfiddle.net/SYG5k/13/
<div class="rel">
a
<div class="absolute">x</div>
</div>
.foo, .rel {
position: relative;
}
This is a work around I can't explain why it doesn't work normally. Perhaps someone else will answer that for you
Edit : my mistake the wrapper is supposed to wrap everything in the cell, it's what I originally wanted to code, more of a typo. I updated the fiddle above
A work around may be to use an inner div with a width and height of 100%, and set that to position:relative;
HTML:
<div class="parent">
<div class="cell foo">
<div class="cellInner">
a
<div class="absolute">x</div>
</div>
</div>
CSS:
.cellInner{
position:relative;
width:100%;
height:100%;
}
Updated JS Fiddle: http://jsfiddle.net/SYG5k/11/
I was adding a popup menu that appears on each row of the table as the user mouses over it when I ran into this FF problem. Based on the very useful info above, I ended up putting a div wrapper inside the table cell in each row where I wanted my absolutely positioned popover menu to located, and set its display property to relative. My JS then adds the absolutely position menu inside the div as each row is rolled - it has to be a child of the the relatively positioned div, of course. Note that the div will shrink-wrap the td's content rather than filling the td as I expected, but no matter, you then have a relative context, and you can use top and left on the absolutely positioned child element to locate it exactly where you want it with respect to the table cell.
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.
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.