I have searched for this topic but nothing seems to be helping me with my issue.
I have a search function that drops down when you start typing but it drops behind the menu bar hiding the search results.
I have played with the z-indexes but nothing helps.
I read that z-index doesn't work for certain positions. Is this true? If so how can I get the results to display over the menu bar?
If I change the positions my menu jumps out of place.
The css for the results:
#results {
z-index: 10000;
position: absolute;
width: 400px;
float: right;
background-color: #FFF;
text-align: left;
the css for the menu:
.menu {
position: relative;
float: left;
width: 900px;
height: 40px;
margin-top: 17px;
z-index: 3;
margin-left: 40px;
margin-bottom: 6px;
Thanks!
Since .menu2 has a z-index of 3, .banner (who is a parent to your search dropdown) needs to have a higer z-index (the class names are from collegesa.co.za).
Try to set z-index to 4 for .banner
.banner {
z-index: 4;
}
Related
I am trying to make a replica of taco bell's website just for fun and as a challenge, and the replica website is private so no one will see it, anyways I am trying to make a side bar, it went good so far until this extra space (https://imgur.com/8soZSIg) appeared in the side bar, here is my css code (also I am a beginner):
.nav {
height: 84%;
width: 150px;
max-height: 84%;
position: fixed;
z-index: 1;
top: 137px;
left: 0;
background-color: #111;
max-width: 100%;
overflow-x: hidden;
padding-top: 0px;
padding: 0px;
padding-bottom: 0px;
min-width: 150px;
margin-bottom: 0px;
}
Try using display: inline-block it will work better since it will turm into an inline element with block element properties but also make sure to fix the max height and max width stuff because they are probably what is causing that space.
I want to have some list elements that got a dynamically adjusting height via css.
For better understanding: I am inserting via ::before a number that I count via counter-increment (thats the big ones)
Problem is that nothing that I tried so far brings me even close to what i want to archive. If you change the window size everything gets shoven down...
It should look like this:
I tried:
clear: both; on every element (except the li)
height: auto; on every element
I've already read through some posts but nothing really worked for me.
Dont ask why am I trying to get it done with css... ;)
Thanks for any help!
You have an absolute positioning on your image and thumbnail wrapper which is causing huge problems, look at the adjusted CSS below:
.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
position: relative;
clear: both;
}
.page-id-3606 .product_thumbnail a::before {
counter-increment: section;
content: "0" counter(section) "";
font-size: 10em;
font-weight: bold;
position: relative;
/* top: 100px; */
/* left: 50%; */
line-height: 0;
height: 100px;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
text-transform: uppercase;
color: #464646;
display: block !important;
border-bottom: 3px solid #464646;
/* transform: translate(-50%, 0); */
margin: 0 !important;
z-index: 10 !important;
}
I fixed it with a little help from Rich.
the missing height and top was causing the trouble:
.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}
I'm trying to achieve a sliding-door effect on a span contained within an h2 element. The h2 element has position set to relative in order to enable z-index, so far so good.
The span is floated to the right within this h2 element and has a z-index set to lower than the h2's in order to slide under it when the view contracts, but keep sticking out under as if only the 'float' matters here.
But here's what I get instead, followed by what I wish to get:
Current result of z-indexed span within z-indexed h2:
Desired result
CSS for containing H2 element:
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
z-index: 5;
padding: 2px;
color: white;
text-align: left;
background: url('left-door.gif') top left no-repeat;
CSS for nested span element:
width: 200px;
height: 100%;
float: right;
z-index: 0;
text-align: center;
background: url('right-door.gif') top right no-repeat;
Anyone knows why the span refuses to sit level with the h2 even though the h2's fixed height ought to cap it within (setting clear: both on the h2 did nothing), and to be obscured by it when the view shrinks? It is because it's nested?
(Also, 'vertical-align' has no effect, the text doesn't settle on text-bottom but sits in vertical middle. Btw, just got started with this tinkering, but happen to be in a hurry. thanks.)
Edit: After BHouwens answer, i tried by reducing the text content of the H2 (real code has text), and the span aligns level, only problem is the z-index doesn't seem to work, but from what I remember from a previous question, z-index doesn't work on nested elements, as in they can't be stacked above or below their parent. Thanks for helping to troubleshoot! This has helped me focus better, and now think I'll just add two spans within the h2!
May be, below code will work for you!
h2 {
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
display: table-cell;
z-index: 5;
padding: 2px;
color: white;
background: #ff0;
}
span {
width: 200px;
height: 100%;
right: 0px;
top: 0px;
z-index: 0;
text-align: center;
background: #f00;
position: absolute;
}
span .wrap {
display: table-cell;
height: 24px;
width: inherit;
vertical-align: bottom;
text-align: center;
}
<h2>
H2
<span>
<div class="wrap">Span</div>
</span>
</h2>
Made a fiddle with your code only, which achieves your desired result: https://jsfiddle.net/dzpfkoLy/
My guess is you've got some other CSS acting on these elements (you can inspect with dev tools in Chrome or Firefox to see what this could be). Otherwise, if you want to ensure the result you need, you can set your span to
span {
// other span styling
position: absolute;
right: 0;
top: 0;
}
Which will shunt it to the top right of the h2. You can then play with z-index to get whatever kind of ordering you're after.
I am working on a layout for a webshop and am experiencing a problem which seems to be very specific.
There is a dropdown navigation which is design to look kind of a tab with a box under it. The point is, that there is a 1px border line between the tab (first level Menu Item) and the box (second level items) which I can't hide.
I thought about giving the second level box a lower z-index than the first level element, but that didn't changed anything. I read a lot about z-index, how it works and how it NOT works, but nothing was about z-index within one list.
This is how it should looks like and how it really looks like: http://i.stack.imgur.com/xbQ6x.png
I created a codepen, which shows the problem very good, when hovering the first level items: http://codepen.io/anon/pen/bNqJxN
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: 0 0 0 -1px; /*Putting a negativ margin-top here puts the box OVER the parent element :-( */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
.dropdown-1-2 {
float: left;
width: 50%;
}
}
I usually solve this issue with z-index to have the bottom of the li to overlap the top of the dropdown.
In your case, I had to remove the * selector for the z-index which came after the li and dropdown which was resetting the z-index to 2 on everything in that navigation. Instead I created just the one stacking context (here's an article on it) for the first nav to appear above the second, and then I gave the ul position relative and the dropdown a z-index of -1 and -1px top margin to move it just behind the unpositioned li.
#mainnav {
...
ul {
#include reduced-list;
...
position: relative;
li .dropdown{
...
margin: -1px 0 0 -1px;
z-index: -1;
...
&#nav1 {
z-index: 2;
}
&#nav2 {
z-index: 1;
}
Sorry, the codepen didn't save.
You can solve it adding a pseudo element to cover the border
li:hover:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: white;
bottom: -1px;
left: 0px;
z-index: 999;
}
codepen
Thanks so much!
Both answers solved my problem like a charme!
I created a codepen with the solution here: http://codepen.io/anon/pen/NPpQOq
ul {
#include reduced-list;
position: relative; /* YEAH */
float:right;
li .dropdown{
overflow: hidden;
position: relative;
display: inline;
visibility: hidden;
position: absolute;
padding:0;
margin: -1px 0 0 -1px; /* YEAH */
z-index: -1; /* YEAH */
background: #fff;
border: 1px solid $light-grey;
width: 280px;
height: 200px;
&.right {
right: -1px;
left: auto;
}
}
Placing a nested child under a parent element seems to be possible :-)
EDIT Changed the text to reflect better the problem.
For live demo you see the website here: http://wow-klickers.de/ (The CSS here I have modified, to maybe solve the problem.)
So I have the following scenario. My website contains a navigation bar, which in the picture above contains a "Forum" button and there is above a logo. If I go over the button the hover effect hides the part of the logo which extends into the button. I want to hover over the button but not hide the part of the logo.
Here are my code snippets:
<h1 id="logo"> // the blue box of the 2. picture
// the blue box of the 1. picture
</h1>
CSS things:
#logo a {
width: 275px;
height: 126px;
display: block;
position: relative;
bottom: 18px; // added here
}
h1#logo {
margin: 0;
position: relative;
left: 85px;
top: 6px;
background: url("images/logo.png") no-repeat;
width: 275px;
display: block;
z-index: 2; // changed here
height: 126px; // added here
}
#primary-menu-bar li a, #primary-menu-bar ul.menu li a {
display: block;
white-space: nowrap;
height: 37px;
line-height: 29px;
position: relative;
z-index: 1;
}
EDIT I tried with padding or margin, but with margin my logo is cut off but the logo should overlay over the button. And padding does not work..
Add z-index:10 to h1#logo, and not just on the a tag inside.