I'm trying to have #menuContainer "above" #mainOverlay using the z-index property, but it won't work. My code for the two IDs:
menuContainer
#menuContainer{
width:650px;
height:50px;
position:relative;
z-index:2;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background-color:rgba(100, 100, 100, 0.46);
}
mainOverlay
#mainOverlay{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index:1;
background-color: rgba(0,0,0,0.3);
}
Alternatively, you could check this JSfiddle out.
Reading similar questions didn't bear any fruits, so that's why I decided to ask a separate question, in case it won't work for other people in the same boat I am in.
All help greatly appreciated.
You are not in the same scope so the z-index will have no effect. You need to add the z-index on the same level, i.e to your parent element #mainOverlayWrap in your case. Remember you will also need to have position: relative|absolute|fixed; set for the z-index to have effect.
Related
I want to style a custom HTML slider <input type="range"> which has some colored endpoints like this:
Currently I can achieve the result seen in the picture by:
input[type="range"] {
&:before{
content:'';
position:absolute;
background-color:red;
// width, height, positioning, ...
}
&:after{
content:'';
position:absolute;
background-color:green;
...
}
Moving the handle to the beginning or end of the range it produces this:
Trying to change z-index I can only paint the colored points completely in front of the slider or behind it.
I tried also to give different z-index values to the browser-specific classes (like ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, ...) but that didn't help either.
Is it possible to paint the colored points "between" the slider rail and the handle so that the point is on top of the rail but the handle covers the point?
input[type="range"]:before{
content:'';
z-index: 5;
position:absolute;
width: 10px;
height: 10px;
top: 10px;
left:-10px;
background-color:red;
}
input[type="range"]:after{
content:'';
z-index: -1;
position:absolute;
width: 10px;
height: 10px;
right: -10px;
top: 10px;
background-color:green;
}
You can't put :before and :after elements behind the parent. So maybe if you put your :before/:after elements before and after the range bar with left:-10px; and right: -10px; your problem will be solved?
i have some problems with the CSS code below. The problem is that only one of the icons are visible (#maps), guess it is some problem with the positioning? (70%?) i cant find the problem, hope that someone here can help.
Thanks in advance.
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 10px;
left: 70%;
}
#navlist li, #navlist a {
height: 64px;
display: block;
}
#face{
left: 0px;
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
#maps{
width: 64px;
height: 64px;
background: url('.../imageurl') 0 0;
}
Html code:
<ul id="navlist">
<li id="face"></li>
<li id="maps"></li>
</ul>
there is definetly an issue with #face! Although I´m not sure if that will make it visible again because I would also need your HTML code. You gave it the attribute left:0px; (btw. you dont need to write "px" if it is 0 anyways). But the browser cant do anything with that because it doesnt know with which kind of positioning you are working! The attribute left:0; makes only sense if you have already given it either position:absolute; or position:relative;. All over all I would advise you to read more about the basic position techniques and upload you HTML for a closer look.
EDIT: Found the problem.You think #face has the attribute left:0;? You are wrong! Because #navlist li { left:70%} beats #face{left:0;} So just remove that attribute at #navlist li and add it at #maps! It will fix it! It was a cascading issue if you are want to read more about it google: CSS cascading system.
Im trying to make a situation where, when one element is hovered over, a different element is transitioned. I typically use the exact code as below and it works fine, but somethings wrong this time around apparantly.
CSS
#sidebar {
width:300px;
height:100%;
position:fixed;
top:0px;
padding:10px;
left:0px;
background:#fff;
font-style:none;
-webkit-transition: width 2s;
transition: width 2s;
z-index:1;
}
#sideimage {
max-width: 150px;
height: 150px;
border-radius: 50%;
background: #111;
position: absolute;
top: 290px;
left: 25%;
}
#sideimage:hover #sidebar {
width: 700px;
}
If anybody can tell me what I'm doing wrong or give me another solution, that'd be very much appreciated.
Link to the page
Well your css doesn't make much sense.
#sideimage is a child of #sidebar so #sideimage:hover #sidebar won't ever work.
You cannot change a parent element based on a child's event without javascript.
You should give us more details on what you are trying to achieve exactly.
Basically I have a Picture in a div nested in 2 divs. I wanted to overlay a piece of tape onto it at the corner of the picture.
So I made a div for that piece of tape image and put it at the bottom of the document giving it the position of relative and giving it these attributes.
#tape
{
width: 100px;
height: 65px;
position:relative;
left: 25px;
top: -662px;
}
And here is the Picture's attributes:
#character-spotlight
{
margin-left:50px;
width:250px;
height:250px;
float:left;
z-index:1;
}
Bot of these Div's are nested into
#content
{
width:800px;
height:1360px;
background-image:url(Cork.Board.png);
background-size:100%;
float:left;
display:block;
}
Which is itself nested into
#container
{
width: 1024px;
height:1600px;
margin-left:auto;
margin-right:auto;
margin-top: 50px;
display:block;
}
Here is the webpage
www.workaholicsfans.com/characters-files/Adam-Demamp.html
It works fine in Chrome but not IE and Firefox.
Any help would be greatly appreciated
(There is no link in your post) I can hardly believe the situation you described and provided css could work. The fact that you have it working in Chrome is just pure luck i guess, are you might have been playing with the numbers to make it fit.
The solution is actualy rather simple.
<div class='picture-wrapper'>
<img class='picture' src='picture.../>
<img class='tape' src='tape... />
</div>
then in the css
.picture-wrapper {
position: relative; /* this now acts as the reference for position absolute of the children */
}
.tape {
display: block;
position: absolute; /* position according to its parent */
top: 0; /* top position */
left: 0; /* left position */
z-index: 5; /* bring to front */
}
That should do the trick.
edit:
i just saw you added the link. If you want the piece of tape to overflow the picture edges, the easy way would be to add some padding-top and padding-left to the wrapper. something like this:
padding: 8px 0 0 8px;
Or if you want it to be absolute positioned according to the page container:
#tape {
height: 65px;
left: 325px;
position: absolute;
top: 300px;
width: 100px;
}
(But I must admit that I like PeterVR's code better since this keeps things relative, which comes in handy if you position 'new' stuff above the #tape div).
I want my footer to always be on the bottom and move to adjust to the size of the content inside the page. Right now I have dynamic content that covers the footer because it's to much content.
How can I fix my CSS:
div#Footer {
width: 100%;
height: 80px;
padding: 1px;
-moz-border-radius: 35px;
border-radius: 35px;
background-color: Black;
color: #ffffff;
position: fixed;
bottom: 0;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Its a little unclear what you want but this code has worked well for me.
Credit - http://css-tricks.com/snippets/css/fixed-footer/
#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
This is a simpler solution.
#footer {
bottom: 0%;
position: fixed;
}
You need to post more html/css to be positive of what is going on here, but it sounds like your footer is being covered by your content page. If this is the case then setting a z-index on the footer will probably sort the issue.
z-index: 1000;
This can also typically be sorted by making sure your footer appears at the end of your html, as elements declared later appear on top of previous ones.
Had a similar issue.
Set "position" to "relative". The position of the element can't change based on the page length if it's set to "fixed".
i think you actually need the align:joe; inside of a candice div to accurately place the element on the deez axis.