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. :)
Related
In this code,
#parent-div{
background: #B3bEb5;
border: 0.1em solid black;
}
#default{
background: #DBE9F4;
}
#centered{
background: #89CFF0;
width: 50%;
margin: auto;
}
/* text-align: left, right, center, justify */
#centered-text{
text-align: center;
}
/* Absolute Positioning : Positioning Based on the Document */
#top-left-pos{
background: #89CFF0;
border: 0.1em solid black;
position: absolute;
width: 200px;
height: 100px;
}
#bottom-right-tl-parent {
background: #DBE9F4;
position: absolute;
bottom: 0px;
right: 0px;
}
#another-pos{
background: #FF0000;
border: 0.1em solid black;
position: absolute;
width: 190px;
height: 110px;
}
<div id="parent-div">
<div id="default">Default</div>
<div id="centered">Centered</div>
<div id="centered-text">Centered Text</div>
</div>
<!-- Demonstrate Absolute Postioning -->
<div id="top-left-pos">Top Left
<div id="bottom-right-tl-parent">Bottom Right Parent</div>
</div>
<div id="another-pos">Top Right
</div>
absolutely positioned top-left-pos element, positions in next row to centered-text element, whose behaviour similar to static positioned elements.
But,
below is the output,
So, Why every new absolutely positioned element another-posis rendered over previous absolutely positioned element top-left-pos? why another-pos element is not rendered as next block element?
With the above code, am expecting another-pos element to be rendered as shown below,
So, Why every new absolutely positioned element another-posis rendered
over previous absolutely positioned element top-left-pos? why
another-pos element is not rendered as next block element?
"The absolutely positioned element is positioned relative to nearest positioned ancestor(non static). If a positioned ancestor doesn't exist, the initial container is used."
Src: CSS/position
This means that if you have 1 or 10 elements using position: absolute, they all start at the same top/left position (if you omit those values in your css rule).
As such they are also taken out of normal flow, which below sample shows, where yet another div, #another-nonpos, using normal flow starts after the previous normal flowed element.
It also shows that positioned elements have a higher z-index than non positioned, making them stay in a higher layer (on top of).
Further reading about z-index: Understanding CSS z-index
#parent-div{
background: #B3bEb5;
border: 0.1em solid black;
}
#default{
background: #DBE9F4;
}
#centered{
background: #89CFF0;
width: 50%;
margin: auto;
}
/* text-align: left, right, center, justify */
#centered-text{
text-align: center;
}
/* Absolute Positioning : Positioning Based on the Document */
#top-left-pos{
background: #89CFF0;
border: 0.1em solid black;
position: absolute;
width: 200px;
height: 100px;
}
#bottom-right-tl-parent {
background: #DBE9F4;
position: absolute;
bottom: 0px;
right: 0px;
}
#another-pos{
background: #FF0000;
border: 0.1em solid black;
position: absolute;
width: 190px;
height: 110px;
}
#another-nonpos{
background: lime;
height: 200px;
text-align: right
}
<div id="parent-div">
<div id="default">Default</div>
<div id="centered">Centered</div>
<div id="centered-text">Centered Text</div>
</div>
<!-- Demonstrate Absolute Postioning -->
<div id="top-left-pos">Top Left
<div id="bottom-right-tl-parent">Bottom Right Parent</div>
</div>
<div id="another-pos">Top Right
</div>
<div id="another-nonpos">Non absolute
</div>
Because the #top-left-pos has greater value of z-index property
When using position:absolute , the div has nothing to do with the document and and gets the parent level regardless of using z-index. in your case, the bottom-right-tl-parent is the child of top-left-pos, thus increasing z-index value wont effect its level. if you move the bottom-right-tl-parent out of top-left-pos, you will be able to apply your z-index and it will work:
<div id="top-left-pos">Top Left</div>
<div id="bottom-right-tl-parent">Bottom Right Parent</div>
The z-index is initially set to auto and applies on all positioned elements. So as the element with id "top-left-pos" has a specified z-index its value is always higher than auto. So, it always stays on top.
Because both the elements have same z index and you have not specified the left and top parameters.If both of them have same z-index and also no coordinates are specified the second one would be placed over the previous one .
#top-left-pos {
top: 0;
}
Set top property to a number will solve the issue
https://jsfiddle.net/00s3f6gj/
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>
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
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;
}