I am having a problem with z-index property on an absolutely positioned div.
Here's my code:
<nav>
<li>
Nav1
<div class="sub_nav">
<ul>
<li>SubNav1</li>
<li>SubNav2</li>
</ul>
</div>
</li>
</nav>
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div id="tabs-1">
sjdhfjdshfjsdhf sdjfhsdjfhsdf jsdhfjsdhfj
</div>
<div id="tabs-2">
jsahdjashdjahsd ajshdjahsdjas jashdjashdjhasjhdja
</div>
</div>
The nav li is positioned relative and sub_nav is positioned absolute.
And the list is positioned in left side and tabs in the right side of the screen.
When I hover the nav li the sub_nav goes behind the tabs div.
Here is my Css:
.sub_nav{
position: absolute;
left: 100%;
top: 0;
background: #eee;
width: 200px;
z-index: 99999
}
There is no z-index in tabs div.
Any help would be highly appreciated.
Apparantly there was a position:relative in the tabs div.
I removed that and the problem solved :)
give z-index: 99; to the <ul>
This is not Z-index problem
you put wrong value 'left:100%' in '.sub_nav' replace this in "right:0px;" or as your structure want
this is Fiddle link visit this
Related
I was wondering if this is possible with ONLY css.
I have a logo container that is positioned absolute. Since this logo can be any width and height it's positioned this way. Next to the logo div I have a navigation div. This element is positioned relative. Is there any way to keep the navigation exactly next to the logo div when that can have any width?
<div class="logo">
<img src="logo.png" class="img-responsive">
</div>
<div class="navigation">
<ul>
<li>....</li>
// etc etc....
</ul>
</div>
CSS
.logo {
min-height: 80px;
padding: 10px 0;
position: absolute;
max-width: 330px;
}
.nav-wrap {
position:relative
background: #ffffff;
float:left;
width:100%;
}
So what I tried is to use calc() but that doesn't work since you can't do something like(???)
calc(100% - (.logo))
I guess display:table won't work because there's an absolute element.
I can use jQuery but that would create a jumpy effect on the navigation.
So the question:
When a div can have any width and is p[ositioned absolute, how can you position an other div right next to it?
Any help greatly appreciated.
I have an HTML5 page, which has a <header> element containing the <nav> section.
Due to the style and design of the overall header, the nav is absolutely positioned within the header, which is itself relatively positioned.
This works perfectly for anchors <a> for which it was originally intended. However, I now have need to add a drop-down menu and am using this one:
http://webdesignerhut.com/css-dropdown-menu/
and
How to get a drop-down menu to overlay other elements
But the issue with this and any other CSS dropdown menus that I have found is that they require the parent element to be relatively positioned, but I can't mark the parent <nav> as being both relative and absolute. I am also finding similar CSS requirements with my investigation of jQuery alternatives.
Markup:
<html>
<header>
<nav>
<ul>
<li>
<a>menu option</a>
</li>
<li>
<a>menu option</a>
<ul>
<li><a>submenu option</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<main>
...
</main>
</html>
CSS (simplified, this works for non-dropdown selection)
header {
position: relative;
}
nav {
position: absolute;
}
CSS (required by dropdowns)
nav {
position: relative;
}
nav ul {
position: absolute;
}
So how can I make the nav element act as a position:relative to its children but act as a position:absolute to its parent?
EDIT
Here is a fiddle trying to outline what's going on.
https://jsfiddle.net/8j9z8wak/
It seems the original cause is that the header element (of which nav is a child) has overflow:hidden which helps with resizing on mobile devices and variable screen sizes with floating images on the top left corner of the header image.
I currently on the fiddle have tried to play with overflow-x and overflow-y but this results in scrollbars and not the intended overflow that works with removing overflow:hidden
re (just for your info.) : There are a lot of CSS / HTML parts to the fiddle, the issue is not the bare bones of the navigation but the way it fits with these other parts, so I've kept them in.
I have the nav as a child of header and I need the header to use overflow:hidden, but nav CSS menu works as intended without overflow:hidden.
I have retained media queries as the overflow:hidden is required for smaller screen size handling.
The navigation menu elements have a floating pair of parts that centre the float as found from https://stackoverflow.com/a/21508512/3536236 . This was applied just for today because all dropdown menu systems use floating elements, and they need to be centred.
Add another container element inside the <nav> and then use position: relative on the inner container:
<html>
<header>
<nav>
<div>
<ul>
<li>
<a>menu option</a>
</li>
<li>
<a>menu option</a>
<ul>
<li><a>submenu option</a></li>
</ul>
</li>
</ul>
<div>
</nav>
</header>
<main>
...
</main>
</html>
CSS:
header {
position: relative;
}
nav {
position: absolute;
}
nav div {
position: relative;
}
nav div ul {
position: absolute;
}
Check this code to clear the concept.
div{
border:1px solid #f00;
}
.gp{
position:relative;
height:100px;
width:100%;
display:block;
float:left;
overflow:hidden;
}
.p{
position:absolute;
top:30px;
left:5%;
z-index:1;
width:90%;
height:50px;
}
.c{
position:relative;
border:1px solid #0f0;
}
<div class="gp">
Grand Parents
<div class="p">
Parents
<div class="c"> childs </div>
</div>
</div>
I have a drop-down menu that has a lot of content. If this dropdown is used on a mobile device, the user will be required to scroll down inside the ul (the ul has overflow:scroll) to reveal the rest of the content. This is somewhat unusual, so I want a downwards-pointing arrow on the bottom of the visible part of the ul.
I just cant seem to place it correctly.
I'm using javascript to set the height of the ul to never exceed the viewport height. I'm just scrolling inside the ul as intended, but it can be hard to that there's more menu-content in some cases.
<ul>
<li>
<li>
<li>
<li>
<li>
...
<img class="moreContent-arrow"> //Should be at the bottom of the visible part of the ul
</ul>
The ul has position:absolute. I've tried giving the arrow position:absolute; bottom: 0;, but that just puts it in the correct position until you move the scrollbar.
I've been searching for an answer but I cant seem to find any searchwords that doesn't lead me to how to position a footer to the bottom of the page.
EDIT 1:
Tried to use position:fixed on the image, but I'm using jquery's .slideToggle() on the opening and closing on the menu, meaning that the image which is fixed wont look good, as it pops in and out of existence without sliding into view with the rest of the content.
After trying to realize what you want.
Try this:
ul {
position: relative;
height: 100px;
overflow: auto;
}
.list {
background-color:red;
position: relative;
height: 100px;
}
img {
background-color: green;
height: 20px;
width: 20px;
position: absolute;
display: block;
bottom:0px;
}
<div class="list">
<ul>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
</ul>
<img class="moreContent-arrow">
</div>
The list has the height so change the calculation in your js to affect it.
Give the same height to the ul, and overflow: auto.
So, to explain what I did here, as you can notice what scrolls is the ul, that is inside the .list. The img has position: absolute relative to the .list not the ul. So when the ul scrolls, it doesn't affect the img.
IF i get it right,
...
position:fixed;
...
Should be what you're looking for.
You can also use CSS to set the UL height instead of JS
I set up a JSFiddle. I gave the image a position:absolute and bottom:0 and I made the container position:relative.
Edit: I just saw you said ul's position is absolute. It works with its position being absolute, too.
ul {
background-color:red;
height: 200px;
position: relative;
}
img {
background-color: green;
height: 20px;
width: 20px;
position: absolute;
bottom:0px;
}
<ul>
<li>
Stuff
</li>
<li>
More Stuff
</li>
<li>
Even more Stuff
</li>
<li>
Stuff
</li>
<li>
Last but not least, Stuff.
</li>
<img class="moreContent-arrow">
</ul>
Hope this helps.
^^^
This doesn't solve my question my situation is different, because of the animated css navigation button. Can get it work like that: display: table-cell and vertical-align: middle; etc.
I have a responsive header that shows a navigation button when in mobile size where you can show the rest of the menu items (disabled in example don't need it for my question).
Because i going to make the header responsive in height it is beter that the navigation button is always centered vertical. Now it is placed in the center with a top margin of 20px and because the button is 20px in height and the header is 60px it is centered, but that won't work if the header height changes responsively.
--> FIDDLE
Code:
<header>
<nav>
<div class="col-nav">
<span class="nav-icon"></span>
Name
</div>
<ul>
<li class="col-nav">Item1</li>
<li class="col-nav">Item2</li>
<li class="col-nav">Item2</li>
</ul>
</nav>
</header>
If you can set it's parent's position to relative then you might be able to use
position: relative;
top: 50%;
transform: translateY(-50%);
on the button
You can try like this DEMO Just changed margin value
CSS:
.nav-icon {
position: relative;
margin-top: 7px;
}
I have a task that I initially thought would be easy, but turned out to be quite difficult. I want to be able to detect the height of the current visible window, center some text in that section of visible window, and place a navigation bar at just the end of the window, so a graphic of what it would look the following:
I have tried various ways of doing this, including setting the height of a div to a certain vh level and centering text inside that dif, though that was quite problematic, as vh is not supported in ie 8 and in order to center the text inside the div, many sources told me to do position: absolute, which tended to shift the text to a corner, which I did not want.
Is there a way in which I can create such a display? If I worded anything incorrectly or posted in the wrong place, please let me know. Thanks in advance for any help.
edit: here is the code I am using: http://pastelink.me/dl/b3cb50
Also some snippets of code for clarification:
what I do is I have a div with height of 100vh and width of 100% and an h1 with an id of myTitle (the css for id myTitle just sets the text-align to center)
<div style="height: 100vh; width: 100%"><h1 id="myTitle"> This is a large title!</h1></div>
and a nav bar directly below it, using foundation's nav bar code:
<nav class="top-bar" id="myNav" data-topbar>
<ul class="title-area">
<li class="name"><h1>My Site</h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section"> <!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
EDIT: Many answers were said regarding setting the position of the nav bar to the bottom, and I thank you for that, though I forgot to clarify one thing. I would like for the nav bar to only be at the bottom initially, and when someone scrolls down it moves up, and does not stay fixed to the bottom.
find
<div class="navbar navbar-fixed-top">
...
</div>
and change it to
<div class="navbar navbar-fixed-bottom">
...
</div>
bootstrap has a fixed top and bottom selectors :)
JSBIN
Is this what you need? A table is the most supported method for vertical align in CSS.
.table {
display: table;
min-height: 100vh; width: 100%;
}
.table div {
display: table-row;
}
.header {
height: 90px;
background: #ddd;
}
.header h1 {
text-align: center;
}
.content p {
padding: 0 1em;
display: table-cell;
vertical-align: middle;
}
.footer {
height: 220px;
background: #ddd;
}