ig88 Posted November 17, 2012 Share Posted November 17, 2012 (edited) I copied the following except from one of W3Schools.com web pages: http://www.w3schools...positioning.asp "Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>." This doesn't seem to be entirely true. From my experimenting with some absolute positioning in the Chrome web browser I have seen that the <HTML></HTML> element does not consume the browser window. It only consumes the space required to hold all elements that have been placed inside it. <html> <body> <h1>This is a level 1 heading</h1> <p>Hello World!!!</p> <div style="position: absolute; bottom: 0; right: 5px;"> <p>This is a paragraph</p> </div> </body> </html> In the above HTML code example you can easily see that the <HTML> element would take up less than 1/4 of the top of the browser window. However, the single <div> element in the example is positioned at the bottom right of the browser window, not the bottom right of the <HTML> container. If I re-size the browser window by pulling the bottom up or down the single <div> element displays behavior that would lead me to firmly believe it's attached to the browser window and not the <HTML> element itself. In a Chrome web browser the default positioning for the <body> and <html> elements is "static". So, I am not sure what element that leaves for the single <div> in my example to attach itself too other than the browser window itself. In a Firefox browser the default positioning for the <html> and <body> elements is "static" also. So, basically the webpage needs to be corrected or something.... Even when checking the "offsetParent" property of the <div> element it shows the value as the <body> element and not the <html> element. The "offsetParent" property of any element shows what parent element the actual element is positioned relative to if I am not mistaken. Am I right...or am I missing something here? Edited November 17, 2012 by ig88 Link to comment Share on other sites More sharing options...
niche Posted November 17, 2012 Share Posted November 17, 2012 Why aren't you using float? Link to comment Share on other sites More sharing options...
Ingolme Posted November 17, 2012 Share Posted November 17, 2012 The <body> container is as small as the content it contains, but the <html> element does occupy at minimum the whole window. That's why setting a background-image to the <html> shows it on the full window. Link to comment Share on other sites More sharing options...
ig88 Posted November 18, 2012 Author Share Posted November 18, 2012 (edited) The <body> container is as small as the content it contains, but the <html> element does occupy at minimum the whole window. That's why setting a background-image to the <html> shows it on the full window.I am sorry to be the bearer of bad news but that's not the way it works in my Chrome browser. When I hover the opening <html> tag in the elements window of the developer tools it highlights the <html> container in a light blue rectangle and reports the size in a bubble. In my example page it's reporting the size of the <html> container as 1920px x 80px. Surely you would agree that a height of 80px doesn't equate to anything near a whole window? I can take a snapshot of the screen with this information if its too hard for you to swallow. By the admission of the quoted text in my original post, for any element to be positioned "relative to its parent container" the parent container has to be positioned as anything 'but' static. And guess what the default positioning for the <html> element is as reported in my chrome browser? That's right. It's positioned as 'static' by default. Therefore, it does not act as an anchor for any positioned elements whatsoever. Edited November 18, 2012 by ig88 Link to comment Share on other sites More sharing options...
ShadowMage Posted November 19, 2012 Share Posted November 19, 2012 (edited) I am sorry to be the bearer of bad news but that's not the way it works in my Chrome browser. When I hover the opening <html> tag in the elements window of the developer tools it highlights the <html> container in a light blue rectangle and reports the size in a bubble. In my example page it's reporting the size of the <html> container as 1920px x 80px. Surely you would agree that a height of 80px doesn't equate to anything near a whole window? I can take a snapshot of the screen with this information if its too hard for you to swallow.What you're seeing is probably buggy behavior in the developer's tools. Try applying a background color to the html element and you'll see that it does cover the entire viewing window.EDIT: Although, the JavaScript DOM properties also return a height that is not the full window (102 in FF). Even when explicitly setting the height of the html element in CSS, the background covers the entire window. Perhaps the background and the parenting of an absolutely positioned element are "immune" to the size restrictions of the html element..... By the admission of the quoted text in my original post, for any element to be positioned "relative to its parent container" the parent container has to be positioned as anything 'but' static. And guess what the default positioning for the <html> element is as reported in my chrome browser? That's right. It's positioned as 'static' by default. Therefore, it does not act as an anchor for any positioned elements whatsoever.Right, but the fallback element is the html element. If there is a parent with position other than static, it uses that parent. If not, it uses the html. It does not matter what the position type of the html element is. Edited November 19, 2012 by ShadowMage Link to comment Share on other sites More sharing options...
ig88 Posted November 20, 2012 Author Share Posted November 20, 2012 (edited) @ShadowMage, Everything you said seems to make perfect sense. I did set the "background-color" of the HTML element to "black" so I could see what area was black. The whole screen was black versus the smaller area highlighted in light-blue when hovering the HTML element in the developer-tools area. The interesting thing is that this behavior is the same for me in both Firefox and Chrome developer tools. So on that note, I would be cautious about labeling this behavior as a bug. It seems to me its just the natural state of things across browsers(well, at least two of them anyway, didn't try Opera, and IE I avoid like the plague). Hovering the HTML element in either one simply highlights a horizontal box with a height just big enough to contain the content you place inside. If your content doesn't fill the screen, neither does the HTML borders according to each browser. It's odd behavior but as long as I have a general understanding of what's going on, and because of your post I do, I guess I can deal with it. HTML is catch-all anchor regardless of position value. Got it! Thanks for your input Edited November 20, 2012 by ig88 Link to comment Share on other sites More sharing options...
ShadowMage Posted November 20, 2012 Share Posted November 20, 2012 I would be cautious about labeling this behavior as a bug.After seeing the JavaScript DOM properties return the smaller height value, I would be inclined to agree. That and the fact that the behavior appears across all major browsers with one exception (see below). It seems to me its just the natural state of things across browsers(well, at least two of them anyway, didn't try Opera, and IE I avoid like the plague).Oddly enough, this is the behavior exhibited by all major browsers (FF, C, O, S) except IE (surprise, surprise ). IE (8 that is, I didn't test other versions) is the only one in which the DOM properties return the full window height. In IE, the developer tools also places a blue border around the entire window. However, adding a border to the html element only places the border around the content area....Ah, good old IE... Link to comment Share on other sites More sharing options...
ShadowMage Posted November 20, 2012 Share Posted November 20, 2012 (edited) To add to the mystery, if you were to set position: relative on the html element, the absolute element positions itself according to the smaller height dimensions. So it seems that your original assumption of there being a "higher" element to position from is correct. Although, this doesn't quite make sense either because changing the position of the html element also changes the DOM offsetParent to the html element (you had originally stated that it is set to the body which, by default, it is). If the default offsetParent is the body it should position according to that, yet it doesn't...and if there is a "higher" element, one would think the offsetParent should be set to whatever that element is. The more I investigate this, the more confused I get... Edited November 20, 2012 by ShadowMage Link to comment Share on other sites More sharing options...
Ingolme Posted November 20, 2012 Share Posted November 20, 2012 There is an element that isn't represented textually in the DOM. The "document" object accessible to Javascript. I'm not sure if it's used by the browser as an element or not but it can have event listeners and other properties pertaining to ordinary nodes. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 20, 2012 Share Posted November 20, 2012 If the height of html element is lower than browser window, and is using position: static;( quote: ' the parent container has to be positioned as anything 'but' static') the position: absolute element will have no option but to go to the bottom edge of browser window. Alsoexample: when creating sticky footer, you have to set height of elements html and body both to 100%, if html is by default height of browser window, we would just need to set body height: 100%;, but by not setting 100% height for html, the body still reproduces the effect you have now. IF html is a block type element with position static, and you add large background image that is twice the height of browser window, and use overflow: hidden; normally with block element you expect it to hide bg image that overlaps the content it is surrounding, but html element does not. real eye-opener here. Link to comment Share on other sites More sharing options...
ShadowMage Posted November 20, 2012 Share Posted November 20, 2012 There is an element that isn't represented textually in the DOM. The "document" object accessible to Javascript. I'm not sure if it's used by the browser as an element or not but it can have event listeners and other properties pertaining to ordinary nodes.Ah yes, the document object. It must be used by the browser as an element. That would explain (most of) the odd behavior...It doesn't, however, explain why body is the default offsetParent. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now