I understand that by setting the parent div to position:relative, if I make the position of the child absolute, than the child's position will be absolute within the parent. If I want to make the grandchild positioned absolutely within child, how would I do that, since child is already set to position:absolute? Sorry if this question is weird, any help appreciated.
HTML:
<div id="parent">
<div id="child">
<div id="grandchild"></div>
</div>
</div>
</div>
CSS:
#parent{
position:relative;
}
#child{
position:absolute;
}
#grandchild{
}
why would you need to put another div inside the child? Just absolute position that one and use z-index to layer them
You can have more than one 'position:absolute;'in nested elements without regard to the positioning of the parent element. Each time you use absolute, you set that divs position relative to the dimensions of its parent element. The parent element can be relative, absolute, or fixed (anything but static) and it should not affect its children nodes.
I mention this just so that you do not mistakenly think that the relative positioning of #parent has any bearing on the absolute positioning of #child, and the #grandchild element can be positioned as absolute OR relative, just keep in mind that you are positioning it to the dimensions of the #child, and in reference to its immediate parent.
The short answer, set #grandchild{position:absolute;} and it will work just fine.
An absolute position element is positioned relative to it's parent element (except if parent has position set to static, but it's not your case), then:
#grandchild{
position: absolute;
}
will set grandchild's position absolute in relative to child - just as you want?
This is easy, if you want to manipulate more. I made you an example of positioning.
Here is jsfiddle example:
http://jsfiddle.net/Be84P/1/
#parent{
position:relative;
height:200px;
background: blue;
}
#child{
position:absolute;
top: 20;
width:20px;
height:100px;
background: red;
}
#grandchild{
position:absolute;
bottom:0;
height: 50px;
background: yellow;
}
I believe it does vary on what type of project your working on, but layering or making a list out of it might help. z-index: in CSS, or an ordered list, in HTML.
Related
When I apply relative positioning to image it doesn't going to the right. But when I use absolute positioning everything is OK. I can't seem to figure out why relative positioning doesn't work. Any help is appreciated.
img {
display: block;
position: relative;
top: 0;
right:0;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
You need the elements to be displayed inline. For this set the display property to inline-block for both the images and use floats to position the second image relative to the other. I suggest reading up some good material on CSS positioning and element types.
img {
display: inline-block;
position: relative;
top: 0;
right:0;
}
.one {
display: inline-block;
position:relative;
float:right;
clear:right;
}
<img src="http://img.jgi.doe.gov/images/img-user-forum.png">
<img class="one" src="http://img.jgi.doe.gov/images/img-user-forum.png">
Relative positioning does not work with bottom or right because :
Relative positioning uses the same four positioning properties as absolute positioning. But instead of basing the position of the element upon the browser view port, it starts from where the element would be if it were still in the normal flow.
So, right would make the element offset from the original position(ie. the edge of the first image), not the edge of the container.
The use of left, top, right, bottom in relative block elements will not align the elements according to the parent relative element, BUT related to the normal element position - TO ITSELF. So top: 0 means it will move 0px from the normal position. It will stay there. Relative to left:0 means exactly the same thing - 0px distance from the normal element position.
On the other side, absolute elements relate to the parent relative element, not to the actual normal position of your img. So that's how it works and stays top right.
In my long journey to update my CSS skills from the deprecated dust that they have turned into, I've been playing around with certain CSS properties —particularly z-index —I'm noticing something strange or maybe there's a certain condition.
Example:
http://jsfiddle.net/mEpgR/
The element div1's parent is cont, I've made div1's position property set to absolute, yet when I shift it, it's moving relative to its parent. I was under the impression that items set to absolute positioning are outsider regular flow and move only relative to browser port as their parent.
What am I missing?
If the fiddle link does not work, code:
CSS:
.cont {
position:relative;
height:200px;
top:200px;
left:100px;
background: green; width: 200px;
}
.div1 {
background:red;
position:absolute;
top:50px;
}
HTML:
<div class="cont">
<div class="div1">DIV1</div>
</div>
An absolute positioned element is positioned relative to the first parent element that has a position other than static. Since you have it inside a parent with relative it will be absolutely positioned relative to this parent.
You might be looking for fixed position, which is relative to browser window.
I run into situation that when user scroll down, a part of the sidebar gets fixed position, however when I catch the position and apply fixed css to the sidebar element, it gets fixed to whole screen, not just the parent (which is sidebar)
how do I setup this correctly?
First Understand Positioning:
Fixed Positioning OR [ position:fixed ]
An element with fixed position is positioned relative to the browser window.
Relative Positioning OR [ position:relative ]
A relative positioned element is positioned relative to its normal position.
Absolute Positioning OR [ position:absolute ]
An absolute position element is positioned relative to the first parent element that has a position other than static.
So in your case your parent div should have position:relative and your child div should have position:absolute instead of position:fixed
Reference Link
From reading your question I assume you have something like this:
<div class="sidebar">
<div class="fixed" style="position: fixed;"></div>
</div>
Unfortunately as you probably know by now, top, left, right or bottom will always act relative to the browser window on positon: fixed elements.
The solution is wrapping your .fixed div with another div, and do all the positioning you have to do on that same wrapper and not on the .fixed div. Let me demonstrate:
The HTML:
<div class="sidebar">
<div class="helper">
<div class="fixed"></div>
</div>
</div>
The CSS:
.sidebar {
position: relative;
}
.helper {
position: absolute;
top: XYZ; left: ZYX; /*where XYZ and ZYX would
be the values you were
trying before to give to .fixed*/
}
.fixed {
position: fixed;
}
See it in action in this fiddle: http://jsfiddle.net/joplomacedo/T2PL5/
Make the parent position: relative then its children will use that as their reference for absolute positioning. For details see the Definition of "containing block" in the CSS 2 specs.
About fixed positioning: how can anything be fixed (which means fixed to the viewport) but still be relative to some other element, which in turn is not fixed to the viewport? This seems a contradiction to me, which is the reason why I first misunderstood your question.
This plugin is exactly what you need
I am quite accustomed to CSS but I have a problem and would like to know if there is a solution.
If I have a div with relative positioning and z-index:2 and another div next to it with z-index:1. Is there a way to have an element in the second DIV rise on top of the first. Z-index:3 will not do it because it is inside an element at z-index 2.
.div1 {
position:relative;
z-index:2
}
.div2 {
position:relative;
z-index:1
}
.inner element {
position:relative;
z-index:3
}
Any ideas.
Marvellous
Assuming I understood your question correctly - No, the element you want on top will have to have a higher z-index.
http://jsfiddle.net/Wgsqd/
You would have to use javascript to access the left and top coordinates of the relatively positioned element, and then set its position to absolute to free the element of its parent's z-index.
If you're using JQuery
var top = $(".inner").position().top();
var left = $(".inner").position().left();
$(".inner").css({
position: "absolute",
top: top,
left: left
});
<style type="text/css">
.a {
border: 1px solid #000;
position: relative;
}
.b {
background: #F93;
position: absolute;
top: 50px;
left: 50px;
}
</style>
<div class="a">
<div class="b">test</div>
</div>
a's height doesn't autoresize with it's content(beause b has flow), but how to resolve this problem, use css possible, not javascript.
If you are expecting to see your a-div resize, then I think you've misunderstood something. When you set an element to be absolute, you're taking it out of the "rendering flow", which means it won't interfere with any other elements on the page.
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and absolutely (but not fixed) positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may obscure the contents of another box (or be obscured themselves), depending on the stack levels of the overlapping boxes.
You see the following documentation: Absolute positioning
When you have a Div with position:relative, you can control any absolute element inside. In fact, absolute Div is out of the flow of the normal document as Greg mentioned above. As I see you set left and top for b and then if you set width of a to 60px like this. Your <div class="b"> is outside the parent box. This is how absolute elements work.
Try "float: left;" in both classes. Didn't test, however. In wich browser are you testing?
if div b is positioned absolute it's not considered 'inside a' anymore, because it's not rendered inside of it.
so div a will not resize as div b gets larger or smalller...
By setting position: absolute you're taking the div outside the normal document flow, which is why the container won't resize to contain it.
Did you want to set margin-top: 50px; margin-left: 50px; instead?