On one of the websites, I found that body element is set position: relative and the content inside body seem to be shifted downwards by a scale of margin-top CSS value set on the topmost element in body.
Why body has CSS 'position: relative' set? Is it intended to fix some bug? I heard that there was some IE bug where we were not able to set absolute positioning of elements.
Why 'margin-top' of 'only' the first element inside body affects the position of every element?
Javascript function 'getBoundingClientRect()' returns wrong value for any element as it does not consider this margin-top value set on topmost element.
1. Why does the body have CSS 'position:relative' set? Is it intended to fix some bug? I heard that there was some IE bug where we were not able to set absolute positioning of elements.
FC: That's not intended to fix a bug, but probably because one the (direct) children of the body element has position:absolute. Without the body having position:relative, that child would be positioned relative to the canvas (the browser inner window), rather than relative to the body element. See this tutorial ('Nested position:absolute') for the full story. There may have been IE bugs in that respect in the past, but as of IE8 IE behaves normally when it comes to this.
.
2. Why does 'margin-top' of 'only' the first element inside the body affect the position of every element?
FC: That is by design. Vertical margins affect the position of the subsequent sibling elements, a position:relative; top:20px does not. Again, see the mentioned tutorial for the full story.
.
3. Javascript function 'getBoundingClientRect()' returns wrong value for any element as it does not consider this margin-top value set on topmost element.
FC: That would also be by design, but I'm not sure whether you are interpreting matters correctly. Can you post some code to demonstrate it? What I do know is that you should be careful with that method. See this Dottoro page for the full story, including alternatives.
Related
Having a strange issue which has happened to me before but I couldn't figure out the issue either. I can work around it but I'd prefer to understand why it's happening so that I can fix the root issue.
The position of a element is changing between 1200px and 1999px as you can see here:
1200px:
1999px:
The element is behaving like there is a breakpoint at 1200 but there isn't and the css doesn't change either according to Chrome dev tools.
You can see that the margin and position change slightly but not enough to cause such a shift in position.
I am using Bootstrap in case that matters.
Does anyone have any idea what's causing this?
This is the problem:
margin-top: 1.5%
You have a percentage based margin value, therefore, on resize, the positioning of the H2 will vary.
If you don't want it to vary, change it to another unit, for example px.
Also, you might want to specify offsets properties (left/right, top/bottom) of the element:
absolute
The element is removed from the normal document flow; no space is created
for the element in the page layout. Instead, it is positioned relative
to its closest positioned ancestor if any; otherwise, it is placed
relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
Absolutely positioned boxes can have margins, and they do not collapse
with any other margins. Source MDN
I am using 'position relative' and 'position absolute' on my master page.
I have a page that use the above master page,
And I am trying to use in this page the 'Position relative' and 'position absolute' again for 2 other elements, but the element below ('position absolute') in this page is not placed according to the element above his ('position relative') and instead it refers to the 'position relative' of the element in the master page..
Hope is was not too clumsy explanation..
Is it possible to use 'position relative' more than once on the same HTML page???
If so, how??
Thanks,
Ef.
To your question:
You are not limited on how many elements you want to position relative or absolute.
However, positioning is quite tricky. Your elements being misplaced most certainly is caused by wrong definitions in your CSS.
I will give a short explanation on how it works:
All elements have standard positioning static.
However, you may define position:relative on as many elements you like.
Now with top|left|right|bottom you can move the element relative to it's original placement. (The original space stays occupied!)
position:absolute may also be defined on as many elements as you like, however it works differently:
The element does not occupy it's original placement and is placed relatively to the first ancestor element which is not statically positioned. (I think this is the error you mention - you have a sibling with position:relative but the absolute positioned element gets positioned according to the PARENT-element with relative/static position)
These are only the very basics, for more insight info, read this article.
Until you add the relevant code/information/demo I cannot answer why you are having an issue with your code and layout, however I can assure you that you can have multiple relatively positioned elements on one page, infact- you can apply and position style to any element as many times as you wish.
element {
position:relative;
}
element2 {
position:relative;
}
You are simply defining rules for elements specifically, there are no rules on the amount of times you can use any rule as the rules are independent of each other.
Reference
You should probably read through this page in order to grasp how element positioning works.
Please look at this example http://jsfiddle.net/xcYum/1/
I want to know why is the div tag (with class=progress) the content is broken into two lines instead of just one line (i.e. your progress vs your\nprogress). I should NOT need to specify the width for the 'div class=progress'. can you please give me an explanation that has all the css and/or html element types (or boxing whatever reason) this happens? I just want to know exactly how the rules actually work, rather than memorizing cases it works or doesn't work.
it seems if i change the .container css to the following:
.container {
position: relative;
}
then the div tag (with class=progress) now displays in single line, why is relative and absolute make such difference? or is it because it is nested?
how do we avoid nested absolute positioned div tags?? is it wrong or bad practice to have such structure. i am using it in this example is because i want
'100%' and 'your progress' to be positioned based on 'div class=container' tag, then i can just move the 'div class=container' tag around. in other words, doing this way, i can just move one thing ('div class=container' tag) to make 2 things move (100% and 'your progress'), the other way around is more work. What is wrong with my thought process here?
Because an absolutely positioned element shrink-wraps, in other words, it becomes as small as possible. You can force text to never wrap using white-space: nowrap
Not sure why this happens
You don't need absolute positioning for an elements children to move with the parent
Absolute element establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.
Reference: http://reference.sitepoint.com/css/absolutepositioning
Same as first answer
Absolute element is positioned with respect to its containing block. So, you just need a parent 'div class=container' to have relative position and then all its elements with absolute position will move with it.
Reference: http://reference.sitepoint.com/css/absolutepositioning
I am trying to absolutely position an element inside a table cell.
The TD has position:relative and the element has position:absolute.
This works great in all browsers except in Firefox where it is positioned relative to an ancestor relative container.
You can see this reproduced in this fiddle: http://jsfiddle.net/ac5CR/1/
Does anyone know if I miss some CSS setting that can fix that in Firefox?
the element is not a block element.
add to the style display:block, you will get the needed behavior.
A possible work around would be to wrap the position:absolute element with another position:relative div. It requires an extra div, which is lame, but will give you the right result.
Example: http://jsfiddle.net/pTJUk/
Note -- this still won't give a completely correct result, as the position:relative div will be relative to the text position in the td -- crazy, right? Giving the cell a vertical-align:top will make it orient to 0,0, but of course this could be at the cost of other formatting your design requires.
It was a very old Firefox bug that have been fixed about 13 years after being reported!
You may refer to the entertaining history here:
https://bugzilla.mozilla.org/show_bug.cgi?id=63895
I have a block-level element of unknown width. This element needs to be horizontally centered on the page, and its position needs to be relative so that its absolutely positioned child will show up in the right place. You can see it in action here.
As far as I know, the best way to center an element of unknown width is to set its display to table. Semantically, this seems incorrect, because my element has nothing in common with a real table. Even worse, Firefox doesn't apply position to tables, so the absolutely positioned child shows up in the wrong spot:
Are there any workarounds for this that:
don't add any extra elements to the html
don't calculate and set the element's width with JavaScript
I'd like a pure CSS fix, and I'm running out of ideas...
Adding display: inline-block; to the element (#box) should suffice. This will cause it to become an inline element and still keep its "boxy" properties. Its width will automatically take up the width of its children.
Then you can set its alignment by setting text-align: center; on its parent.
IE7 does not support this display value (only on naturally inline elements), but the situation is the same with table (no support at all). You can use a hack though to make inline-block work in IE7.
jsFiddle Demo
If worst comes to worst, you could try text-align: -moz-center; which is a Firefox-specific method of centering block elements like inline-elements.