I'm struggling with getting a background image on this page and a drop shadow to show on top of my tab.... [URL_REMOVED]
The left tab should be "below" the white content area, thus the shadow effect should be on top of the tab. The second issue is that I'm using CSS to apply a gradient background, I also want to have a background image as well and it's not working. Can anyone help me figure out why?
You have to add postion:relative to #main and #side. z-index works only on positioned(absolute/relative) elements.
#main {
…
position: relative;
z-index: 2;
}
#side {
…
position: relative;
z-index: 1;
}
Related
I am trying to make a sidebar that is similar to the one shown here: https://www.sketchapp.com/docs/ .I made everything working fine except making the box shadow opacity at top and bottom, I tried box shadow but couldn't make it the way its shown in the page. what I did so far
Thanks in advance! ^^
image to see
Welcome to SO.
You can use pseudo selectors and add to them a background with a linear gradient.
for example:
div::before {
background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
content: '';
display: block;
width: 100%;
height: 4rem;
position: absolute;
z-index: 0;
}
here i am doing the following:
I set the background to a linear gradient fades the color, I put display block in order to make it behave like a div, finally I set the z-index to 0 in order to place it at the top of the other elements.
here is a working demo: https://jsfiddle.net/hdsma1fv/5/
references:
about pseudo elements: https://www.w3schools.com/CSS/css_pseudo_elements.asp
about linear gradients: https://www.w3schools.com/css/css3_gradients.asp
Edit:
If you need the shadow to hide with the scroll then you need to attach the pseudo selector ::before to an element inside the scroll and remove the position: absolute;.
Also if you want it to show in the bottom also, you need two things: first - rotate the linear gradient angle and second - use the pseudoselector ::after instead of the ::before one.
check https://jsfiddle.net/hdsma1fv/34/ for an updated example with both modifications.
I want my navigation bar to be fixed at the top, but when I put the css coding in, all the other buttons on my page stop working.
This is my CSS
#header {
position: fixed;
left: 0;
top: 0;
bottom:200px;
padding:inherit !important;
width: 100%;
z-index:9999;
}
I have tested it and the website works fine when I take this out.
I would assume that the since your layout is fixed and you are using the position properties and z-index that your #header is above everything else and putting an "invisible barrier" between where you click and the buttons underneath all buttons below 200px from the bottom of your screen should be clickable to see for yourself try adding a background color to see what is going on. Removing the top and left positions will help and if possible you might not even need to use the z index property depending on what you are trying to achieve.
I have a portfolio site here:
http://mrliger.com/index2.php
I have an issue whenever I hover of the menu li elements on the left side. The hover state changes the background color of the li to a darker grey but at the same time covers the arrow just to the right of the menu item. I'd like the arrow to always be visible. I've tried using z-index but no joy. Any suggestions?
The z-index property only works on positioned elements (position:absolute, position:relative, or position:fixed). This simple CSS should work for you:
.topnavi {
position: relative;
z-index: 1;
}
OR:
.arrow-up {
position: relative;
z-index: 1;
}
Note: For future questions, it's better if you add the code here instead provide a link.
On this page http://londonsitedesign.co.uk/code/basic.html I am trying to place an image above a full screen slideshow, but behind my header. The image is a white gradient. I have given the image the style z-index: 0 which places it in front of the background, however it covers the header. How can it sit between the header and the background?
I noticed that the menu in the header is onto of the image but the rest of the elements in the head section are behind the white gradient image. Why is there this difference in the layering of elements?
thanks for any advice.
Angela
You need to add position:relative to your #header (and any other elements with a z-index but no position specified):
#header {
height: 157px;
background-color: #FFF;
z-index: 5;
position: relative;
}
This should do what you want:
.container_24 {position: relative; z-index: 10;}
It will also stop the fade over the footer, which I wouldn't think you'd want, either.
i want my div of menu to appear on the top left of the div for my header image. The backgrounds used for the menu blocks are transparent and translucent and i want that the image of the header should be visible under through translucent and transparent backgrounds.. How can i do it using css??
the class for div of menu is divmenu and for header is divmainimg
div.divmainimg {
position: relative;
}
div.divmenu {
position: absolute;
top: 0;
left: 0;
}
Consider changing the class names to mainimg and menu, respectively.
Set position: relative; on the parent object of your menus that you want them to be positioned relative to, and set position: absolute; on the menu divs. Often you can get away without specifying the exact position - if the divs appear in the DOM where you want them to be visually. E.g. this could be enough:
body {
position: relative;
}
div.menu {
position: absolute;
}
Edit: Forget about z-index for now - it is rarely needed.
HTH
try to use absolute position, and set a high z-index for the div you want over others..
You could also now Just simply put the div you want to be over the other div inside the div you want to be under for example:
pretend your div class="a" is the one you want on top, Then div class="b" you want on bottom.
that would put A on top then B under it.
I believe what you are wanting is z-index. Rather than explaining it here, just do a Google search for it. It is simple to understand.