can i place a div at absolute position relative to body which is dynamically generated inside a a div which position is relative
here is my scenario i have to keep it this way only
http://jsfiddle.net/bipin000/swqqH/
okay its not possible until you make parent div position:static and then make dynamic div position:absolute
http://jsfiddle.net/swqqH/25/
No, that's not possible. As the parent div is positioned, it becomes the offset parent, so the absolutely positioned div will be placed relative to the outer div, not relative to the body.
Related
When we give an element a position property of absolute with a vertical and horizontal offset (ex bottom, left) it is positioned relative to the closest parent element that has a position property of relative.
If no parent element has a relative property than the absolutely positioned element is positioned with respect to the browser window.
The definition of fixed positioning is quite the same it says, "Fixed positioning is a type of absolute positioning in which the element is positioned with respect to the browser window."
The main question I have is it that why the absolutely positioned element moves up when the page is scrolled down and the fixed positioned element does not when both of them is placed with respect to the browser window.
Absolutely positioned elements are never positioned relative to the browser window (i.e. the viewport) except by coincidence. Nor are they, in the absence of a positioned ancestor, as w3schools would have it, positioned relative to the body element. Nor are they positioned relative to the html (i.e. the root) element.
html {
margin:20px;
border :1px red solid;
height:100px;
}
body {
margin:30px;
border :1px blue solid;
height:90px;
}
div {
border :1px green solid;
height:155px;
position:absolute;
top:0;
left:0;
}
<div>text</div>
If an absolutely positioned element has no positioned ancestor, it is positioned relative to the initial containing block, which has its top, left corner at (0, 0) on the canvas. As the scrollbars move the viewport over the canvas, so absolutely positioned elements are moved relative to the viewport by scrolling.
Here is a short explanation of how these positions properties work
Fixed Position
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled
Absolute Position
This property helps to position element with respect to a parent element that has a position of either relative or absolute and if there is no such element it'll position according to the browser window
Absolute Position:
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
ref: https://www.w3schools.com/css/css_positioning.asp
So Basically Absolute Positioning of an Element, when no nearest parent has position defined, Absolute Positioned element is placed with respect to Element , but not with respect to browser window. that makes it scroll , on scrolling the webpage body or browser window.
Like you said, an element with position absolute "is positioned and sized solely in reference to its absolute positioning containing block".
A good follow up question is: what if there is no relative/absolute/fixed positioned parent (including document or body)? The element "is included in the scrollable overflow area of the box that generates is containing block." Usually this is your window object, but it could be any scrollable div you have. Absolutely positioned elements inside of a scrollable element will scroll up with it, even if your scrollable element is statically positioned.
Fixed elements are "positioned relative to ... the viewport" and do "not move when the document is scrolled."
https://www.w3.org/TR/css-position-3/#absolute-position
When I set position: absolute and top: 0px the element does not actually positions absolutely, but it positions relatively to its parent (with position: relative).
Is there a simple way to set element position relative to the whole document not to the parent?
UPDATE
Can I do this if my element is already attached to a div with position:relative?
It's a problem to reattach element to the body in my case.
If you want your div to be positioned absolute to parent than simply place it between the <body> tag (Here I assume that you are using position: relative for body) and not inside any positioned relative child element else your positioned absolute div will be positioned absolute to that element and not the body(Which you are referring as parent here)
An element with a position: absolute will position itself absolutely to the first parent element with another position style.
You need to bring the element outside any elements with position styles. You may as well put it at the end of the body HTML if it's going to be positioned absolutely anyway.
So I have a wrapper div with relative position,
to the bottom of it there is another absolute div which should be on top of it,
another child of the relative div wrapper is the actual content div, which does not have position set.
Now what happens is that the absolute div gets on top the content.
I can't use z index because the content div has no position...
Is there any work around for this?
Z-index can be applied to any element with a relative, absolute or fixed position.
Set the div's position to relative (you don't have to set top or left) and then set the z-index.
I have two divs inside a parent div that I'd like to be relatively positioned. The only thing is that I'd like for one div to fill up 100% of the parent and to overlap the second div, which I'd like to fill up 50% of the parent, but be right aligned. If I decrease the width of the first div, then, the second div would become visible without ever having to be hidden.
How can it be done?
Can't be done with relative positioning, it'll have to be absolute:
http://jsfiddle.net/WKJwk/
Can you look at jsFiddle example and tell me why my green <div> won't stick to the bottom of its parent's scrollable height? I'm sure it's something simple. Thanks in advance!
You're not specifying any positioning for the wrapper element (body in this case) so your element is positioning to the bottom of the window.Try assign a position different from static to the wrapper element (relative,absolute whatever it's fine and it depends on your needs)
give a look here
this might help you
hope this help
If the answer to my comment is yes, than give you body tag a position of relative
body
{
position: relative;
}
If some other element is the parent, just replace body with that element. With you given code, the green div is not sticking to the bottom because it is absolutely positioned and does not have any relative or absollutely positioned parent/ancestor, in which case it will position itself relative to the viewport/browser window/canvas (not the canvas element in HTML5) which may or maynot be the html or body element depending on the user agent/browser. When you give the body a position of relative, it provides a new positioning context and than the green div will be positioned relative to the body element. In case if the body tag is not the parent, give the position relative to the parent element, which ever that may be.
Fiddle
Try this:
#green{
position:fixed;
...
}