I have two layer,one is black overlay:
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 0;
display: none;
}
the other is my text container:
#wrap {
z-index: 999
width:600px;
height:600px;
border:5px solid black;
display:none;
color:red;
}
I want let the overlay and the container show at the same time:
$(document).click(function () {
$('#overlay').add('#wrap').fadeIn();
})
but the text container is always under the overlay,although I have set the overlay z-index to 0 and set the container z-index to 999.
Demo is here
finally I found I have to set the overlay z-index to -1, it would work.
Why I can not set the overlay's z-index more higher?Because its position is fixed?
z-index is not applied to #wrap because it has flow positioning. A box must have at least position: relative; before z-index takes effect.
Also, your z-index value is missing its semicolon. Make it z-index: 999; and it works. My code is below:
#wrap {
z-index: 999;
width:600px;
height:600px;
border:5px solid black;
background: #FFF;
display:none;
color:red;
position: relative; }
An element with static positioning(this is the default) is unaffected by the z-index property, change its positioning to relative
Related
When I use :after pseudo class with background image, it doesn't shows in my div.
Why does it happen?
P.S. When I apply position:absolute top:0, right:0, I can see the image.
<div class="vienas">abra kadabra</div>
.vienas {
height:200px;
border: 1px solid black;
position: relative;
}
div::after {
content:" ";
background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg);
width:100px;
height: 100px;
}
By default pseudo-elements are set to display inline. Because of this, your width and height properties will not have any affect on the element and it will instead default to the width and height of the inner content.
You need to set it to display: block instead:
div::after {
...
display: block;
}
JSFiddle demo.
Try like this: Demo
CSS:
div:after {
content:"";
background: url("http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg") no-repeat -100px -100px fixed;
width:100px;
height: 100px;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
I'm trying to fix a problem with a pseudo li element in this script:
http://jsfiddle.net/5xkrS/6/
When adding a backgroundcolor to the parent div, the connectorbars between the stepnumbers disappear. (see http://jsfiddle.net/5xkrS/7/ )
The backgroundcolor seems to overrule the pseudo li element, but not the li element. Using the following css:
/*progressbar connectors*/
#progressbar li:after {
content:"";
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
What can cause this problem and is there a way to fix this?
Here you go
http://jsfiddle.net/5xkrS/9/
#container {
width: 500px;
height: 600px;
margin: 0 auto 0 auto;
background-color: deepskyblue;
position: relative;
z-index: 1;
}
Added position relative and z-index 1 to the container. tested on FF and chrome on mac
I have been trying to fix the length of this div for awhile, and I'm sure it is something completely simple, just not seeing it. The div for the content "page" is extending well beyond the footer and I can manipulate the length with the min-height property in css however I want to make sure that the footer/"page" div extend to bottom regardless of the content so I don't want to set a definite length for the div.
EDIT:
jsfiddle: http://jsfiddle.net/F2SMX/
Footer cs
#footer {
background: #365F91;
color: #000000;
width:100%;
height: 35px;
position:relative;
bottom:0px;
clear:both;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
color: #FFFFFF;
}
#footer a:hover {
text-decoration: none;
}
changing footer position from relative to absolute had no change
Change relative to absolute, and remove min-height from #page.
#footer { position: absolute; }
You'll also need to make sure that you only have 1 #page per page.
Working fiddle.
Go old school.....add this to you css of #footer
bottom: -500px;
padding-bottom: -500px;
working demo
CSS
#footer {
background: #365F91;
color: #000000;
width:100%;
height: 80px;
position:relative;
bottom: -500px; /* push to the bottom */
padding-bottom: -500px; /* maintain equilibrium by giving footer its height!!*/
}
EDIT
to make footer stretch to height, if content exceeds
demo
#footer {
background: #365F91;
color: #000000;
width:100%;
min-height: 80px; /*change height to min-height, this will always cover the content height*/
position:relative;
bottom: -500px;
padding-bottom: -500px;
}
If you want a scrollable footer if content exceeds
demo
#footer {
background: #365F91;
color: #000000;
width:100%;
height: 80px; /*keep height fixed*/
overflow-y:scroll; /*scroll when content size increases */
position:relative;
bottom: -500px;
padding-bottom: -500px;
}
You want to use something called sticky footer.
http://css-tricks.com/snippets/css/sticky-footer/
Or you can use my solution without using pseudo class :after
EDIT: sorry here you have my solution to problem with div instead of after http://codepen.io/anon/pen/LsFIn
Here is a fiddle.
<p>foo <a class="infolink" href="#">bar</a> baz</p>
and
a.infolink::before
{
content: '?';
background: blue;
color: white;
width: 20ex;
height: 20ex;
}
The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome.
Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.
Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.
a.infolink::before {
content: '?';
display: inline-block;
background: blue;
color: white;
width: 20px;
height: 20px;
}
http://jsfiddle.net/C7rSa/3/
::before and ::after pseudo-elements are laid inline by default, so width and height won't take effect.
Set it to display: inline-block and it should work.
Use this if you have image in container or CSS white-space: nowrap; property
body::before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
}
For me it worked when I used display: block.
If you set the element to position: relative and the pseudo to position: absolute, you can adjust the pseudo width and height in relation to the parent element size.
div {
position: relative;
width:400px;
height:200px;
padding: 0;
}
div::before {
position: absolute;
width:100%;
height: 100%
}
add display:block;
demo
p > a.infolink::before {
display:block;
content:'?';
background: blue;
color: white;
width: 20ex;
height: 20ex;
border:1px solid #000;
}
I can get it to work but not using a percentage in width. Pixels work fine
visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.