I have a horizontal list boxes which is overlapped by a pop up overlay. And horizontal boxes are structured using ui li
Now the question is, how to get the single box above the overlay using z-index. In my example I need to get the li which has class name .test above the overlay div.
.wrapper { position: relative }
ul li {
margin:0;
padding:0
}
li {
background:yellow;
display:inline-block;
width:60px;
height: 60px;
}
.overlay {
background: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10
}
.test {
z-index:100 /*not working */
}
DEMO
z-index property works on positioned elements. You could add position: relative; to the element to get the z-index property to work:
.test {
z-index:100;
position: relative;
}
WORKING DEMO
Add a position: relative; to your test class
Related
http://www.thinkstudio.co.za/Untitled-1.html
All is in one html file, using css amd html. I have tried using z-index, it works, but the moment you hover over the pop box area, it gives problems (please see link above) Has this to do with div positioning? I need 2 divs with content inside the container area, and once you hover over it, there needs to be a popup, if there is any other easier way, please help!
Is this what you're looking for? https://jsfiddle.net/53LyLmy9/
What I did was creating a JQuery event where whenever the mouse enters the popup or the box, the popup would show, and when the mouse left, it would hide.
$('#box,#popup').mouseenter(function(){
$('#popup').show();
});
$('#box,#popup').mouseleave(function(){
$('#popup').hide();
});
The problem is when you hovering .box it loose hover at link that was trigering .box display.
Fixed your problem like this
.box:hover {
display:block;
}
I would suggest learning about position: relative and child elements with position: absolute, and By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div.
z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index. Note that this property only works with positioned elements.
The problem is when you hovering .box it loose hover at link that was trigering .box display. Try this fiddle: https://jsfiddle.net/Jyde/2sodLq6y/
.box {
display: none;
position: absolute;
background: #215273;
width: 200px;
height: 100px;
float: left;
color: white;
margin-top: -30px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 90px;
text-align: center;
z-index:1;
}
.topdiv{
height:250px;
width:250px;
}
.container{
width:400px;
height:600px;
background-color:white;
color:white;
/*Important:*/
position:absolute;
z-index: 10;
}
.left{
width:200px;
height:300px;
background-color:#bda97f;
float:left;
position:absolute;
}
.link-spanner{
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 1;
}
a:hover + .box {
display:block;
}
.box:hover {
display:block;
}
At my site I have a block with image as background and title above the image:
html
<div class="block">
<img src="someimage.png" />
<div class="title">Some title</div>
</div>
css
.block {
position:relative;
}
.block img {
position:absolute;
top:0;
left:0;
}
.block .title {
margin-top:100px;
text-align:center;
}
Requirements for the .block:
I cannot change <img> with <div style='background-image:url(someimage.png)'> - it must be <img>
.title must be relative
But the problem - absolute div hides the title. . Playing with z-index do nothing just because z-index does not work with relative elements. So my question - how can I organize this block. Any advices will be very apprecated!
z-index does work with relative positioning. Just set the .title to relative (or inherit since its parent is relative) and add a z-index
Per http://www.w3.org/wiki/CSS/Properties/z-index
Only works on positioned elements(position: absolute;, position: relative; or position: fixed;)
CSS
.block {
position:relative;
width: 100px;
}
.block img {
position:absolute;
top:0;
left:0;
}
.block .title {
margin-top:100px;
text-align:center;
color: #FFF;
position: relative;
z-index: 1
}
FIDDLE
I seem to be having a problem with my Wordpress CSS Menu. I am trying to create a dropdown element in the menu, which is conveniently wrapped in a div automatically called "sub-menu".
When normal, the menu looks like this:
However, when I try to access the drop-down menu under "Photography", this happens:
I have tried everything and am unable to get it to correctly show up under Photography. Any help would be much appreciated:
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
#header li:hover ul.sub-menu {
display:block;
}
You need to make sure the container element (#header li) is set to a position as well. I would use relative becasue it will (hopefully) not break other positioning:
#header li {
position: relative;
}
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
header li:hover ul.sub-menu {
display:block;
}
Absolute elements will position itself based on the nearest parent who's position is set explicitly.
I want to display a loader inside the container. I am trying to display the overlay div inside the container.
if I use absolute position, the overlay also going top.
Here is Fddle : http://jsfiddle.net/vaykmry4/5/
Code :
<style>
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height:100%;
margin:auto;
left:0;
top:0;
position:absolute;
background:#fff;
opacity:.8;
text-align:center;
}
.loader {
display:inline-block;
}
</style>
<div class="container">
<div class="overlay">
<span class="loader">
loading...
</span>
</div>
<div class="content">Here is content ... <div>
</div>
Thanks.
First of all I should note that a fixed element is positioned relative to the initial containing block which is established for the html element.
Hence you should use absolute positioning to position the overlay relative to its nearest containing block which is established by the container.
.container {
position: relative;
overflow: auto;
}
.overlay { position: absolute; }
Second, It will work until the content start growing. When the content height gets bigger than the overlay, the overlay will not fill the entire space of the container anymore.
Since you may use JavaScript in order to to display the overlay (including loading, etc.) one solution is to add overflow: hidden; to the container to prevent from scrolling.
Finally, you should set top property of the .overlay element according to the position of the vertical scroll-bar.
Here is the jQuery version of the above approach:
var $container = $(".container");
$(".overlay").fadeIn().css("top", $container.scrollTop() + "px");
$container.css("overflow", "hidden");
EXAMPLE HERE
You are using margin: 25% on container which is causing the gap of 50% top-bottom value for overlay, so use height: 150% instead of 100%
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
width:100%;
height: 150%;
margin:auto;
left:0;
top:0;
bottom: 0;
right: 0;
position:absolute;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
working fiddle
position: absolute will let you place any page element exactly where you want it with the help of top right bottom left attributes. These values will be relative to the next parent element.
position: fixed is a special case of absolute positioning. A fixed position element is positioned relative to the viewport.
In your case you should use position: absolute for your .overlay
Use this:
HTML:
<div class="container overlay">
<div class="content"><div>
</div>
CSS:
.container
{
margin: 25%;
position:relative;
width:200px;
height:200px;
border:3px solid #ddd;
overflow:auto;
}
.overlay {
margin:auto;
left:0;
top:0;
position:relative;
background:#000;
opacity:.5;
}
.content {
height:300px;
}
Here is the working fiddle
I'd like to create a div with an arbitrary size, then display something on top of that div. What is the best way to position and size the overlay exactly as the div below in css?
You can use position:absolute to position an overlay inside of your div and then stretch it in all directions like so:
CSS updated *
.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.85);
background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */
z-index:9999;
color:white;
}
You just need to make sure that your parent div has the position:relative property added to it and a lower z-index.
Made a demo that should work in all browsers, including IE7+, for a commenter below.
Demo
Removed the opacity property from the css and instead used an rGBA color to give the background, and only the background, an opacity level. This way the content that the overlay carries will not be affected. Since IE does not support rGBA i used an IE hack instead to give it an base64 encoded PNG background image that fills the overlay div instead, this way we can evade IEs opacity issue where it applies the opacity to the children elements as well.
I'm late to the party, but if you want to do this to an arbitrary element using only CSS, without messing around with positioning, overlay divs etc., you can use an inset box shadow:
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
This will work on any element smaller than 4000 pixels long or wide.
example: http://jsfiddle.net/jTwPc/
http://jsfiddle.net/55LNG/1/
CSS:
#box{
border:1px solid black;
position:relative;
}
#overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:rgba(255,255,0,0.5);
}
Here is an overlay using a pseudo-element (eg: no need to add more markup to do it)
.box {
background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
width: 300px;
height: 200px;
}
.box:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
}
<div class="box"></div>
I would suggest using css attributes to do this. You can use position:absolute to position an element on top of another.
For example:
<div id="container">
<div id="on-top">Top!</div>
<div id="on-bottom">Bottom!</div>
</div>
and css
#container {position:relative;}
#on-top {position:absolute; z-index:5;}
#on-bottom {position:absolute; z-index:4;}
I would take a look at this for advice:
http://www.w3schools.com/cssref/pr_class_position.asp
And finally here is a jsfiddle to show you my example
http://jsfiddle.net/Wgfw6/
Quick answer without seeing examples of your current HTML and CSS is to use z-index
css:
#div1 {
position: relative;
z-index: 1;
}
#div2 {
position: relative;
z-index: 2;
}
Where div2 is the overlay
If you don't mind messing with z-index, but you want to avoid adding extra div for overlay, you can use the following approach
/* make sure ::before is positioned relative to .foo */
.foo { position: relative; }
/* overlay */
.foo::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 0;
}
/* make sure all elements inside .foo placed above overlay element */
.foo > * { z-index: 1; }
I was just playing around with a similar problem on codepen, this is what I did to create an overlay using a simple css markup. I created a div element with class .box applied to it. Inside this div I created two divs, one with .inner class applied to it and the other with .notext class applied to it. Both of these classes inside the .box div are initially set to display:none but when the .box is hovered over, these are made visible.
.box{
height:450px;
width:450px;
border:1px solid black;
margin-top:50px;
display:inline-block;
margin-left:50px;
transition: width 2s, height 2s;
position:relative;
text-align: center;
background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG');
background-size:cover;
background-position:center;
}
.box:hover{
width:490px;
height:490px;
}
.inner{
border:1px solid red;
position:relative;
width:100%;
height:100%;
top:0px;
left:0px;
display:none;
color:white;
font-size:xx-large;
z-index:10;
}
.box:hover > .inner{
display:inline-block;
}
.notext{
height:30px;
width:30px;
border:1px solid blue;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
}
.box:hover > .notext{
background-color:black;
opacity:0.5;
display:inline-block;
}
<div class="box">
<div class="inner">
<p>Panda!</p>
</div>
<div class="notext"></div>
</div>
Hope this helps! :) Any suggestions are welcome.
div{
background-image:url('');
background-size:cover;
background-position:top center;
position:relative;
}
div:before{
content:'';
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:rgba(0,0,0,0.7);
}