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
Related
I'm trying to place 'blue' at the bottom of the parent container 'green'. I've tried following this answer, but can't get it to work. I want the blue div to be at the bottom of the green div.
#green {
position:relative;
width:auto;
height:200px;
background-color:green;
}
#blue {
position:absoloute;
bottom:0;
height:75px;
width:auto;
background-color:blue;
}
<div id="green">
<div id="blue"></div>
</div>
Thanks.
1- You need to change position absoloute to absolute of #blue, then after width auto to width 100%.
#blue {
position: absolute;
bottom: 0;
height: 75px;
width: 100%;
background-color: blue;
}
Here is an working example for you http://codepen.io/saorabhkr/pen/BoQjvN
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 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
Lets say I have 2 divs:
<div id="divOuter">
<div id="divInner"></div>
</div>
Let's also say that the outer div is about 3/4 down the page, centered on the screen (horizontally), and has a width of 200px. Obviously the inner div would be initially at this position. How can I keep the inner div at the same vertical position (which is currently is), but move it all the way to the left of the screen?
Position divInner absolutely and set the left propery to zero:
position:absolute;
left:0px;
jsFiddle example
You could add some CSS to it. However the only way I know uses fixed positions so for example:
.position{
position: relative; left: -20px;
}
Then in your div
<div id="divInner" Class="position"></div>
Would be 20 pixels to the left
You can give #divInner an absolute left position but leave its top position to auto;
#divInner {
position: absolute;
left: 0;
}
This assumes that #divOuter is not absolutely positioned itself.
How about this HTML...
<div id="divOuterWrapper">
<div id="divOuter">
<div id="divInner"></div>
</div>
</div>
...and this CSS?
#divOuterWrapper {
position:relative;
background-color:#dddddd;
}
#divOuter {
width:200px;
margin:0 auto;
margin-top:300px;
background-color:#00ff00;
min-height:50px;
}
#divInner {
position:absolute;
background-color:#0000ff;
min-height:30px;
width:200px;
margin-left:50%;
left:-50%;
}
Here's a JSFiddle:
http://jsfiddle.net/5Qfq3/1/
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.