Check this code :
HTML :
<div style="position: absolute; visibility: visible; width: 172px;">
<img class="inf-image" align="right" src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">
<div class="inf-content">
Hello
</div>
</div>
CSS :
.inf-image
{
position: relative;
cursor: pointer;
margin: 3px 8px 0px 0px;
width:20px;
}
.inf-content {
background-color: #FF0000;
padding: 10px;
width: 150px;
height:50px;
}
looks like the div (which is relative) is under the image (which look absolute). Why? It should push the div over its height.
Floating elements (like an <img align="right">) offset only the content of block elements, but not their backgrounds, so the red background of the div is seen under the image.
Its all about the CSS stacking context. If you give an element another position than static it will be moved to its own stacking context. From a logical point of view the .inf-image { position: relative; } is no longer a child of the parent DIV or a sibling to .inf-content. What you have now is a DIV with another DIV (the red one) inside. The image itself "hovers" in its own context right below the document root (HTML) and is just positioned relative to that element, which preceded it in the source.
Which is shown above which element can be determined by a combination of position and z-index.
https://developer.mozilla.org/en/Understanding_CSS_z-index
http://reference.sitepoint.com/css/stacking
According to your css and html your div is positioned absolute while your image is positioned relative. This is your problem.
<div style="position: relative; visibility: visible; width: 172px;">
<img class="inf-image"src="http://www.ilritaglio.it/wp-content/uploads/2012/02/wee.jpg">
<div class="inf-content">
Hello
</div>
</div>
.inf-image
{
position: absolute;
cursor: pointer;
margin: 3px 8px 0px 0px;
width:20px;
right:0;
}
.inf-content {
background-color: #FF0000;
padding: 10px;
width: 150px;
height:50px;
}
Related
I'm trying to achieve that the erf_fromto would have a higher z-index than left_side, cause left_side do have a border, while i want the erf_fromto to be over the border.
this is how it looks like currently, while I want the erf_fromto to be over the line.
<body class="parent" ng-app="myApp">
<div class="left_side child"></div>
<div class="right_side">
<div class="erf_block" style="position:relative;">
<div class="erf_fromto">2011 - 2012</div>
</div>
</div>
</body>
css:
.left_side {
width:35%;
float:left;
border-right: 3px solid #F6F6F6;
}
.parent {
overflow: hidden;
position: relative;
}
.child {
height: 100%;
position: absolute;
}
.erf_fromto {
position: absolute;
left: -122px;
border: 2px solid #F6F6F6;
padding: 5px;
font-weight: bold;
box-shadow: 0px 0px 2px #F6F6F6;
font-size: 15px;
z-index: 99;
overflow: hidden;
}
codepen: http://codepen.io/anon/pen/XjzwdN
z-index applies to an element and it's children. Since .erf_fromto is nested inside .erf_block, which is inside .right_side you'll want to ensure that it's .right_side that has the higher z-index than .left_side!
From MDN:
The z-index property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.
If you also put a position: relative; and z-index:0; to the .left_side child it will work
Maria,
If you add a background to left_side and erf_fromto you will see they are on the correct position.
I think you just need add background property on your erf_fromto class:
.erf_fromto {
...
background: white;
...
}
I hope it helps...
Good Luck!
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
Is it possible to make multiple absolute-positioned divs overlap multiple relative-positioned divs in IE6 & IE7?
See this jsFiddle for more information: http://jsfiddle.net/btker/1/
HTML
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
CSS
.wrapper{
height: 100%;
width: 100%;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 100;
}
There are two relative <div>s (placed in identical wrappers) containing each one a absolute <div> that overlap all the relative <div>s. This works great without any problems in updated versions of Chrome, Firefox etc, the absolute <div> with z-index is always placed on top.
In IE6 and IE7 this is not working. The different between this problem and the standard "dropdown in header display its menus behind the page content" is that in those situations its often fixed by give the parent element of that specific menu other z-index etc. In this case the both absolute <div>s are put in identical <div>s.
Can this be solved so the absolute <div>s are always on top of all relative <div>s in IE6 & IE7? Conditional comments for IE can be used to make the solution cross-browser.
It is possible but only by decreasing the z-index of the second .wrapper or increasing the z-index of the first .wrapper.
On a simple level, each positioned element with a non-auto z-index creates a new stacking context, although there are other circumstances in which a new stacking context is created - see The stacking context.
The problem is one that affects IE <= 7, from quirksmode.org
In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.
CSS
.wrapper{
height: 100%;
width: 100%;
}
.lower {
position: relative;
z-index: -1;
}
.higher {
position: relative;
z-index: 2;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 1;
}
HTML
<div class="wrapper"> <!-- add higher class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper"> <!-- or add lower class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
My HTML:
<div class="outer">
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
<div class="inner">
Lorem Ipsum
<div class="innerest">
<!-- no content -->
</div>
</div>
</div>
My CSS:
.outer {
background: red;
padding: 6px 20px;
z-index: 10;
overflow: hidden;
}
.inner {
background: green;
z-index: 11;
float: left;
margin-left: 12px;
}
.innerest {
background: blue;
width: 30px;
height: 20px;
z-index: 9;
position: absolute;
}
Here's a fiddle: http://jsfiddle.net/jsnlry/ycJdy/
I want the blue boxes to be behind the red one. It seems, that z-index is ignored in this case. But why?
Any idea?
In this example z-index only works on the position:absolute element. Try putting a negative value like -9 and it should work.
Do you mean like this:
http://jsfiddle.net/audetwebdesign/WJzRY/
.innerest {
z-index: -1;
}
Why This Works...
By default, z-index is auto which computes to 0, all elements have the same stacking level.
In my fiddle, I set up a sequence of styles to show what is happening.
You start off with a parent div with two floated children which are out of flow, and the parent height collapses to 12px high because of the padding (Ex 1).
When you declare overflow: hidden, you start a new block formatting context and the floated child elements are retained in the context of the parent, which is why the red background fully covers the child elements (Ex 2).
Finally, you can add absolute positioning to the .innerest elements, and this takes them out of the flow and they project out of the .outer ancestor element. Note that the floated elements affect the computed height of the containing block, unlike absolutely positioned elements. On the right .innerest element, you add z-index: -1 which places this element below all the other elements in the stacking order (computed to 0), so you get the desired effect.
Reference
http://www.w3.org/TR/CSS2/visuren.html#layers
Please add z-index: -1 to innerest class. it will be work.
.innerest {
background: blue;
width: 30px;
height: 20px;
z-index: -1;
position: absolute;
}
Try adding a negative z-index (-1) to your .innerest class.
Now used to this code define your .outer class position relative and remove overflow hidden
.outer {
background: red;
padding: 6px 20px;
position:relative; //add this line
}
.outer:after{
content:"";
clear:both;
overflow:hidden;
display:table;
}
.innerest {
z-index: -1; // add this line
position: absolute;
}
Demo
I keep getting weird results under Opera 10.60 trying to absolutely position block element inside inline-block element.
Sample code:
<html><head><style type="text/css">
div.container {
position: relative;
display: inline-block;
padding: 5px 100px;
border: 1px solid red;
}
div.block {
display: block;
position: absolute;
top: 0px;
right: 0px;
border: 2px solid brown;
}
</style></head><body>
<div class="container">
<div class="block">(>O.o)></div>
Quick brown block jumps over relative div.
</div>
</body></html>
Opera positions .block relative to the last inline element ( in this example) inside the same parent (.container), instead of positioning it relative to the parent.
Am I missing something, or is it just a bug, and I should find the other way around?
wrap your content in a div or something else, then it works.
http://jsbin.com/isuke3/edit
Change
position: relative;
to
position: absolute;
and it will align itself correctly in the browsers. :)