I'm developing a help system for a site where they want the page to turn opaque when activated except for the DIVs you can receive help on.
The problem is I can't figure out how to get specific divs to "appear" transparent on top of an opaque background.
I tried setting the z-index of the divs to a value higher than the background but that doesnt seem to work.
Here is a JSBin illustrating the issue. Anything with the "help" class should appear to be transparent (i.e. not opaque)
http://jsbin.com/ifohuc/1/edit
Thanks.
You must set the position attribute of li.help in the css file
for example
position:relative;
Change #bgDiv to z-index= -1
http://jsbin.com/ifohuc/2/
#bgDiv {
width: 100%;
height: 100px;
min-height: 100%;
background-color: #999999;
position: absolute;
left: 0px;
top: 0px;
opacity: 0.85;
z-index: -1;
}
Related
Is there something wrong with my code that makes this green css div block not show up in the exact same place on each page?
On the index page it's perfect, right under the nav bar. But on the page "This" it's not in same place. The stripe also changes position with any additional content. Why is that if it's set to relative? Isn't it floating and other content shouldn't disrupt its postioning? I'm so confused. PLEASE take pity on me as I am not great at CSS as you will see from my code:
/* green stripe */
.stripe
{
padding: 0.25rem 9999rem;
background-color: #4ea647;
z-index: 889;
position: relative;
top: -1200px;
left: -500px;
height: 50px;
}
THIS IS THE SITE:
https://andrea-levin-7gzp.squarespace.com/
I have a contentWrapper class which contains all of the elements on my page. For some reason, the navigation takes up what appears to be 100% of the body and then some. I cannot however get the following elements, the slider and divs below, to stretch to fill the same width. There is always extra room to scroll to the right which displays the background color. I have made it pink in the fiddle its easy to see.
body {
background-color: black;
}
.contentWrapper {
height: 100vh;
width: 100%;
background-color: black;
}
http://jsfiddle.net/o5y26tqw/
Any suggestions? I feel like it could be an easy fix, deleting sections of the page at a time did not seem to remedy the issue.
So it looks like your .cycle-overlay is 100% wide and left is set to 20px. This is pushing everything over and revealing the background. Setting the width to 300px got rid of it for me.
JSFiddle
.cycle-overlay {
position: relative;
top: -200px;
left: 20px;
z-index: 999;
width:200px;
}
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?
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
Running in compatibility mode the calendar below renders behind the textboxes below. IE8 displays the calendar how I need it to.
My CSS
.MyCalendar .ajax__calendar_container
{
border:1px solid #7F9DB9;
background-color: #ffffff;
z-index : 1004 ;
width:190px;
}
the textboxes which are overlaying the calendar don't have their z-index set anywhere although I have tried in my server side code to set their z-index to -1 if I detect IE7 to no avail. Any suggestions?
IE has problems with z-index. Most browsers treat the page as one continuous stacking context, but in IE, positioned elements generate a new stacking context, starting with a z-index value of 0.
As mentioned in this article:
http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/
try giving the calendar's parent element an even higher z-index.
I finally got it on top with an additional transparent background image. IE8. SASS:
#galerie-link {
position: absolute;
z-index: 1000;
top: 25px;
left: 40px;
a {
display: block;
width: 185px;
height: 90px;
background-image: url(../images/transparent.png);
}
}