So I am having a z-index problem on my website, take a look at: https://displee.com/osrs-store
If you look at the header of each step you, you will notice that only step 3 has a ribbon and step 1 and 2 do not (if you don't see this, then try to zoom-in). Step 1 and 2 also should have a ribbon.
I cannot seem to fix it, I played around with z-index on all elements and using position relative but it is not working. I think somehow it has to do with the height of my content or something.
I think you are having a stacking issue with your .panel elements stacking context. Your are trying to place a the <header>'s :before behind it's parent - the .panel.
You can't really stack an element behinds it's parent I think, you set the the z-index to -1 maybe trying to place the element behind it's parent but are clearly running into issues.
What you probably need to do is place the the header:before puesdo element next to the white content box (the .panel) instead of behind it by simply reducing it's size, and fixing some minor issues.
In your stylesheet (https://displee.com/css/home_style.css) update theses 2 styles starting around line 548:
CSS
.ribbon > header:before { /*Update selector*/
bottom: -24px;
content: "";
display: block;
position: absolute;
}
.ribbon > header:before { /*Update selector*/
border-color: transparent #3b4d56 transparent transparent;
border-style: solid;
border-width: 0 21px 24px 0; /*Update size*/
height: 0;
left: 0; /*Update to zero*/
width: 0;
z-index: 0; /*Update to zero*/
}
I see this as the result. I believe this fixes your having to zoom in issue also.
If I add height: 0; to my body element, then everything is fixed. Does anyone knows why this fixes it. Also, I don't think this is the right way to fix it?
Related
I am faced with a situation where I am struggling to find a solution. So I have two sections. Within the top section, I have an image which I have placed at the bottom using flex. The idea is simple, as I scroll down, the image should slide up into place.
I have got this to work, but I have noticed that when the image is within section 2, it sits on top of this section, instead of behind it. Ideally, you should not be able to see any of this image within section 2. This JSFiddle demonstrates my problem.
So I have found a way to overcome this. I essentially gave each section a relative position and then set a z-index.
#sectionTwo {
position: relative;
z-index: -1000;
}
#sectionThree {
position: relative;
z-index:1000;
background: #ccc;
}
This seemed to fix the problem, but one thing I do not like is that when I try to inspect element, it seems to always focus on the body element rather than the section I select.
Anyways, with that fix in place, I was faced with another problem. The section also needed a box at the top, that would overlap into the section above it. I made a quick sketch to demonstrate what I am after
I have noticed however that setting the z-index is now causing me problems. I can't get the box to overlap section one.
Here is my latest JSFiddle which demonstrates where I am at.
So really I am after advice on whether I am handling the z-index correctly, and how I can get the box overlapping section one.
Thanks
Going into positive zindex values seem to fix your problems:
#sectionOne {
position: relative;
z-index: 10;
}
#sectionTwo {
position: relative;
z-index: 20;
}
#sectionThree {
position: relative;
z-index: 30;
}
Is this what you are after? If you are wanting the elements in section 2 to be on top of section 1, you will need to give section 2 a higher 7 index than section 1.
#sectionOne {
background: #ccc;
z-index: 2;
}
#sectionTwo {
position: relative;
z-index: 3;
}
#sectionThree {
position: relative;
z-index:1;
background: #ccc;
}
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
http://www.milknhny.co.uk/SofiaWork/home/
Hi
The following has a banner, which has a box shadow, and i want it to sit over the top of the image.
Ive tried putting a z-index and position of absolute on the div class .maincontentinner
however the background seems to mess up (with it being a gradient) when i do this.
Any ideas how i can achieve this? I have a clearfix in there also
thanks
style.css line 431
.headerwrap {
width: 100%;
height: 218px;
background-color: #ffffff;
box-shadow: 3px 3px 8px #41434b;
posistion: fixed;
z-index: 99999;
}
Change posistion to position.
First off, I'd use relative rather than absolute positioning, since I don't think you want to disrupt page flow.
I applied:
position: relative;
z-index: -1;
to .maincontentinner and it seems to work just fine. What do you mean by "the background seems to mess up"? What browser are you testing in?
I'm fixing a prestashop theme and I'm about ready to tear my hair out over a very small issue. I have a search positioned absolutely beside my navigation, but the top is 10px lower than firefox in chrome, so basically, if it is centered in firefox, it hangs low on chrome. below is my search box css:
#search_block_top {
background: none repeat scroll 0 0 transparent;
height: 30px;
position: absolute;
right: 20px;
top: 215px;/*this is correct in firefox*/
z-index: 1005;
}
you can see the site in here: http://goo.gl/sfFYT reset is given my stylesheet and I have tried manually setting search block's font-size and line-height to zero, but it hasn't worked. I have no idea what to do with this. Thanks a lot for helping.
Sorry, I didn't view the answer before mine, and gave a totally duplicated answer. withdraw that. and here is the new one:
#menu {
overflow: hidden;
}
#search_block_top {
top: 205px; /* you can modify the original rule */
}
the main idea: create a BFC for #menu with overflow: hidden;
PS: that code is unbelievable. :(
stay away from that, and have a nice day.
I have problem with z-index again.
Please check page
http://webakery.asia/projects/valentine/
On the right side I have absolutely positioned picture with flowers, but they are overlaping navigation and eventually affect functionality of links in navigation. I want to hide those flowers behind navigation.
I have been playing around with z-indexes, but still cannot figure out the way. Can anyone help please?
Thanks
You have to change your z-index: 100 to z-index less than 50 (your navigation z-index) for section, e.g.
section {
margin: 0 auto;
position: relative;
text-align: left;
width: 960px;
z-index: 20;
}
and add position: relative to your nav
nav {
background: url("../images/bg-menu.png") repeat-x scroll 0 0 transparent;
min-height: 66px;
position: relative;
z-index: 50;
}
i think div.flowers should be outside of your tag
try this.. make the z-index on section -1 and look how everything goes behind your nav.
i think you should move div.flowers outside of your block and then assign its z-index independently. As is, you can change it all day, but the z-index that matters belongs to