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;
}
Related
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 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
i have came across a problem, i am fairly new to CSS but how do i make one div go over the other? This is my code:
#left_box
{
margin-top: 0px;
min-width: 10%;
max-width: 10%;
height: 800px;
background: #C90;
border: thin 5px #33CCFF;
position: absolute;
z-index:1;
left: 16px;
top: 1px;
float:none;
}
#bar_outside
{
margin-top:75px;
min-width:10px;
max-width:2000px;
height:55px;
background:#ff69b4;
border:#ff69b4: 5px;
position:static;
z-index:2;
}
thanks for your help!
If you want one div to be on top of the other, you can change the position: static in your #bar_outside to position:relative as the z-index property just works for relative, absolute or fixed. See the fiddle.
If you want the divs to be positioned one to the side of the other, use the float CSS attribute accordingly in both your CSS classes. See the fiddle.
You don't need position: absolute. Float left and define width
I have a rounded square box image that has a red strip that runs along the left side and has a transparent background (the white bit) which I created in photoshop. I would like to place an image behind this box. I have tried setting the position:absolute and z-index: -1; however, it places the image behind everything. Is there a way I can achieve this with just the CSS? P.S. I have searched for solutions but the ones I have come across did not seem to help me at all.
CSS:
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: -1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
}
You can't reliably set z-index without setting position on your elements; the stacking is also relative to the elements' containers, so if everything is at root level the image with a negative z-index will disappear behind the page. (Personally, I try and avoid negative z-index values whenever possible.)
#boxes {
position: relative;
}
#boxes img {
border:1px solid;
margin:4px 0 0 0px;
padding:0;
position: absolute;
width: 359px;
height: 218px;
z-index: 1 ;
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
}
#boxes .box {
width:370px;
height:241px;
float:left;
background-image:url(../imgs/box_front.png);
background-repeat:no-repeat;
background-color:#FFF;
margin:80px 30px 0 0;
position: relative;
z-index: 2;
}
EDIT:
The problem is that your HTML is structured so the red stripe is the background image of the container that you're loading the image into. As this also has a background-color, the image is being lost behind it.
A better way of doing this would be to use HTML/CSS' natural document flow - i.e. the later the element appears in the HTML, the 'higher' it is in the natural z-index. This'll mean you don't have to specify z-index values, but you will need to add a presentational div to your code (unless you want to monkey around with :after pseudo-elements):
Each grey box will need to look like this:
<div class="grey box">
<h3>Stationary</h3>
<span class="border"> </span><img src="http://placekitten.com/g/361/220"><div class="innerBox"> </div>
</div>
... and your CSS will need to change. Remove the background from the .box styles, and add this to your CSS:
#boxes .innerBox {
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
You can then remove the z-index from #boxes .box, and because the innerBox div appears after the image in your markup, it will naturally appear higher than your image.
If you can't add any extra HTML to your markup template, you could repurpose the border divs, which don't seem to be doing much:
#boxes .border
{
border:none;
z-index:1;
cursor:pointer;
position: absolute;
left: 0;
top: 0;
width:370px;
height:241px;
background-image:url(http://i754.photobucket.com/albums/xx182/rache_R/box_front_zps196242cf.png);
background-repeat:no-repeat;
}
You'll need to update your images too:
#boxes img {
/* other declarations */
position: absolute;
left: 4px;
top: 0;
/* other declarations */
}
... and make sure your #boxes .box style has position: relative; set.
That should do you: http://jsfiddle.net/mr3Fq/4/
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);
}