I have a link in a table cell and when the link is clicked I show a hidden div.
Currently I use position: absolute and z-index:10. It works fine, but I would like to move it a bit to the top and left. When I add top: -10px and left: -10px, the div moves to the position of the window.
How do I make it 10px off the table cell?
You need to set the parent element using position relative then use position absolute on the element you want to position. So if you want it to be positioned based on the table you need to add position: relative to the table (which won't do anything because it is already positioned relative) and position: absolute to the overlay. Absolute positioning takes the element out of the document flow and relative positioning leaves it in the document flow which is why stuff is being moved around. The reason for this is based off how CSS works: http://www.w3schools.com/css/pr_class_position.asp
relative The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position
absolute The element is positioned relative to its first positioned (not static) ancestor element
You might also be interested in fixed.
fixed The element is positioned relative to the browser window
Here is an Example: http://pastehtml.com/view/av391nzsv.html
position: relative;
instead of
position: absolute;
Relative says to measure top and left from the parent element, absolute says to measure from the top left corner of the page.
use margin-top:-10px; margin-left:-10px;
Related
I am trying to have a banner like below
using 'absolute' or 'fixed'.
However, it becomes like this when I tried with 'left: 0 right: 0 top: 0'
or with width '100%, then it pushes the right. How can I set 'A' like in the first picture? I don't want to use relative or static since it pushes the content downward.
You can't do it with fixed, but you can set the parent div (the black box in your example) to have position: relative; and that will make the absolute positioned child position itself according to the parent div.
Why is this?
Absolute - the element is positioned absolutely to its first positioned parent. -- DZone
What this means is that the absolute positioned element will position itself according to the nearest ancestor with an assigned position, besides static.
I hope this is clear enough, but let me know if it's not.
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
Anyone tell me that how to fix all elements with css, means whatever we do with the browser's height and width then elements should not move? or elements should not move relative to the browser' height and width and page should also be scroll able?
Applying position: absolute to an element will cause it remain fixed relative to the document. That is, it will scroll with the document.
Applying position: fixed will cause it to remain fixed relative to your browser window. That is, if you scroll the document it will not move.
With each of these position values, you can specify some combination of top, right, bottom and left to specify their position. For example, the following style will fix an element very close to the top right of the browser window (it will not scroll with the document):
.topright {
position: fixed;
top: 5px;
right: 5px;
}
In class we learned that if I have two divs: a wrapper div (let's call it div A) that's defined as position: relative; and another div, div B that's inside div A with position: absolute;.
What will happen is that now the position of div B is dependent on the position of div A. Meaning that now the point 0,0 of div B is not the point 0,0 of the browser, but of div A. So, if I was to move div A say 20 pixels to the right, and div B 30 pixels to the right, div B would be 50 pixels to the right of the browser's point 0,0;
Now, my question is: what if I have 3 divs. Div A that's position: relative;, within it div B that's position: absolute, and within div B, another div (div C) with position: absolute;. Now, how will div C behave? Will its position 0,0 be that of div A or div B?
Thanks in advance.
code:
<style type = "text/css">
#a {
position: relative;
left: 20px;
}
#b {
position:absolute;
left: 20px
}
#c {
left: 20px
position:absolute;
}
</style>
<div id = "a">
<div id = "b">
<div id = "c">
test
</div>
</div>
</div>
As you can see from this JSFiddle, the position of "C" div is relative to its father "B" with
position: absolute;
I don't have much to add to both these great answers, but here's an article that helped me understand the concept. http://alistapart.com/article/css-positioning-101
EDIT:
That article covers that a div with position absolute is positioned on the inner grid of its closest ancestor(parent, grandparent, etc.) that is fixed, relative, or absolute. If there is none it is relative to the html document, but note it still behaves differently than fixed. It also covers the key differences between the three position types as well as the static position type.
static - this is the default position it creates no grids for children absolute positioned divs. You can't use the css properties top left right or bottom.
relative - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it 'relative' to where it was previously at. When using top, left, right, and bottom other elements still go around where it was previously at.
absolute - creates a grid for descendent(children, grandchildren, etc.) absolute positioned divs. You can use top, left, right and bottom, but they move it relative to the closest ancestor(parent, grandparent, etc.) grid. Remember the grids are created by fixed, absolute, and relative elements. When using top, left, right, and bottom the element goes out of the flow of the document. (this means other items go through it.)
fixed - creates a grid for children absolute positioned divs. You can use top, left, right and bottom but they move it relative to the browser. When using top, left, right and bottom goes out of the flow of the document. (this means other items go through it.)
Div B - any absolutely positioned element is positioned according to it's closest positioned (absolute, relative, or fixed) parent.
It's a matter of personal preference, but this article was the one that cleared things up even more for me than the AListApart one: http://learnlayout.com/position.html
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.