I have the following markup:
http://jsfiddle.net/dy4TG/3/
<div class="slide-wrap">
<div class="slide">
<div class="text">Text here</div>
<img src="image.jpg" />
</div>
</div>
<div class="overlay"></div>
the .slide div must be absolutely positioned, and .slide-wrap would have position: relative.
Is it possible for the .overlay div to be between the image and the .text div? I need the stacking context to be like this (highest to lowest):
-Text
-Overlay
-Image
Thanks!
Live example here: http://movable.pagodabox.com (inspect the slideshow... in the specific context of this example, "overlay" has the class "kineticjs-content", and the .slide div is inside of the #slides parent div.
The key is to make sure everything is positioned absolutely, this way you can float everything however you wish, with any z-index.
css:
.overlay {
width: 20px;
height: 20px;
background: #fff;
z-index: 50;
position:absolute;
top:0;
left:50px;
}
img{
z-index: 20;
position:absolute;
top:0;
left: 5px;
width:100px;
height: 100px;
background: #000;
}
.text {
z-index: 999;
color: #888;
position:absolute;
top:0;
left: 5px;
}
.slide-wrap{
position:relative;
}
.slide{
position:absolute;
top:0;
left:0;
width:100px;
}
jsfiddle link: http://jsfiddle.net/a7Apz/3
You must give a z-index to .text, and it has to be the highest one if you want it to be on top of everything. And you must not give a z-index to .slide or .slide-wrap, as that would create a new stacking context, with the text and image nested in it. You need the text, the image and the overlay on the same stacking context.
Here is a jsfiddle to demonstrate. And here is the same idea applied to your jsfiddle.
Related
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 have an image in the center of a div
The image is centered in the parent div using the following css:
img { margin:0px auto; }
The image can have arbitrary dimensions.
How can I position the Magnifying Glass (zoom) image on top left of the image without using Javascript, while the main image can have any width or height?
User position:relative and position:absolute. Look at the following HTML and CSS.
HTML
<div class="parent">
<div class="test"><img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" border="0" />
<img src="http://www.beyotta.net/images/icon_magnifier.png" border="0" class="absimg" />
</div>
</div>
CSS
.parent {width:100%; height:400px; border:1px solid blue; text-align:center;}
.test
{
display:inline-block;
position:relative;
}
.absimg
{
position:absolute;
top:5px;
left:5px;
}
FIDDLE DEMO
Giving a position relative to the image and absolute to the magnifying glass image would do the trick here's the demo on what I've done.
http://jsbin.com/yumelamive/5/edit?html,css,output
i am not sure it will work or not but try using before will help
img:before {
content: 'img/zoom.png ';
position:absolute;
top:0px;
left:0px;
}
for proper help atleast provide a jsfiddle or code of your work
Try Use this
jsfiddle
div{
content:"";
display:block;
height:300px;
width:300px;
border:solid 1px #CCCCCC;
background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg");
position: absolute;
}
div:before {
content:"";
background-image: url("http://icons.iconarchive.com/icons/icontexto/search/48/search-red-icon.png");
top:0;
left:0;
position:absolute;
width: 40px;
height: 48px;
}
I would make a div for the image, set the background the image and add:
position: relative;
for that div. Then put the magnifying glass within the div and set:
position: absolute: top: 0; left: 0;
.image {
background: url(eiffel.jpg);
position: relative;
width: 100px;
height: 200px;}
.image img {
position: absolute;
top: 0;
left: 0:}
The 'relative' is what any 'absolute' objects..relate to.
I hope that helps.
set the image Magnifying Glass to absolute:positionand use left: right: for right position then the parent div set to position:relative
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
If I have a div that has another div beneath it, would the underlying div's hover state be activated when the cursor is over the top div? Assume that the top div has a z-index of 5 and the other div's z-index is 1.
The short answer is no.
Take the following code as an example:
HTML:
<div id="one">one</div>
<div id="two">two</div>
CSS:
div {
position: absolute;
height: 300px;
width: 300px;
}
div:hover {
background-color: yellow !important;
}
div#one {
top: 0;
left: 0;
background-color: red;
z-index: 10;
}
div#two {
top: 150px;
left: 150px;
background-color: green;
z-index: 1;
}
The hover never activates on div#one when div#two is hovered in the overlapping area.
http://jsfiddle.net/Yff7Q/
Just whipped together something quick.
An element within another element with :hover will work (even on negative z-index).
An element outside the element with the negative z-index won't work.
CodePen | JsFiddle
HTML:
<div class="box">
<div class="inside">
</div>
</div>
<br><br>
<div class="box">
</div>
<div class="outside"></div>
CSS:
.box{
position:relative;
height:250px;
width:250px;
opacity:.4;
background:red;
}
.outside, .inside{
background:blue;
height:100px;
width:100px;
position:absolute;
z-index:-5;
}
.outside{
top:400px;
}
.inside:hover{
opacity:0;
}
.outside:hover{
opacity:0;
}
I have a parent Div positioned relatively and is set to overflow:hidden. How do I overlay the Div inside?
I set the margin of the inner div to negative because I want it to overlap with the parent div.
html
<div class="out">
<div class="in">
</div>
</div>
css
.out{
margin-left:100px;
width:130px;
height:130px;
margin-top:10px;
border:1px solid blue;
position:relative;
overflow:hidden;
}
.in{
width:80px;
height:80px;
z-index: 999;
clear: both;
position: absolute;
margin-left: -20px;
margin-top: -20px;
background-color:yellow;
}
Use:
position:absolute
z-index:9999;
You can position an overlay inside of your div
Remember to set your parent div with the position:relative property and a lower z-index
Made the following changes to your .in CSS,
width:100%;
height:100%;
removed the following lines,
margin-left: -20px;
margin-top: -20px;
Test Link