-3

I was trying to position a footer at bottom of page or bottom of screen, whichever is lower. I thought the following would work:

body { margin-bottom: 4em; }
.footer { position:absolute; bottom: 0 }

But the above always put .footer at bottom of screen, even if the page was longer than the screen. I struggled for hours until I found that the following was needed:

html { position: relative }

I can't find documentation for the position style when applied to the html element. What does this style do the html element? Html is the father of all elements, so what does position mean? What is the default value for position for element html?

Old Geezer
  • 14,854
  • 31
  • 111
  • 198
  • This question was already asked many times, like [position: absolute; bottom: 0; go to bottom of page](https://stackoverflow.com/questions/47759725), [Position Absolute and Bottom 0](https://stackoverflow.com/questions/19612951), so you should include a refernce to those questions, and explain why their answers to answer your question. – t.niese Jul 31 '18 at 05:25
  • Please Check position properties at: https://www.w3schools.com/cssref/pr_class_position.asp . It sets positioning style of an element and also has effect on some other areas. For example position of an element need to be defined if you want to set z-index of an it. – Tanvir Ahmed Jul 31 '18 at 05:32
  • 1
    basically, it does what it says - `position:absolute;` positions it top left in the first element that has a `position: relative;` up the tree. position relative positions itself relative to the other relative element. - putting relative on the `html` tag makes sure that any absolute elements at least has something to position themselves to. – Stender Jul 31 '18 at 06:33
  • "I can't find documentation for the position style when applied to the html element". That's because there's nothing special about the html element. It does the same thing as it does on any other element that's not `display:none`. To understand what is happening, read up on [containing blocks](https://www.w3.org/TR/CSS22/visudet.html#containing-block-details) – Alohci Jul 31 '18 at 06:42

4 Answers4

1

The CSS position is used for giving custom position to your any HTML element. The position style has 4 different type of value and they are static|relative|absolute|fixed. Lets take a look at each value, so lets start with static position value, every element has a default position in a web page, so giving an element a static position means it will keep the element at its default position, and it is of no use to specify an element's position as static. Next is relative if you set an element's position as relative then there'd no effect of this value on its position but you can use top,bottom,left,right property to move an element from its normal position without giving or showing any effect to other elements position in a web page. Now let see absolute position value, so when you give an absolute postion to an element then that element break its normal flow from its normal position and takes a position according to a parent element or by a browser window. It will take position from that parent element whose position value is already given as relative|absolute|fixed except static. And now the last position type is fixed so if you give an element's position as fixed then you can move that element to any x and y position, and that element will get fixed to that given x and y position and won't even move from that fixed position while scrolling up or down in that web page.

Aditya Mandal
  • 188
  • 2
  • 12
  • 1
    Thanks, but it does not answer the question. The top, bottom, left and right properties of my `html` were not set, and as it is the topmost element containing everything else, relative placement wrt other elements is not applicable or very meaningful. – Old Geezer Jul 31 '18 at 06:12
  • Okay, BTW I thought you were asking the working knowledge of a css style position inside of a web page. :D – Aditya Mandal Jul 31 '18 at 06:46
0

Default position of element is static so we adjust that static position as per our need by giving different position. Here are different link:

https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Link for footer always bottom: For this you have give height:100% to html and body and then you have to give min-height:100% to body

https://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

RRRGGG
  • 114
  • 6
0

position: relative, without an accompanying offset, is used almost exclusively to create a reference for position: absolute (which traces back to the first non-static element it finds).

The default is static (per MDN), though adding relative doesn't change anything visually unless you add an offset.

jhpratt
  • 6,841
  • 16
  • 40
  • 50
  • Your first paragraph is interesting. I wasn't aware that this setting affects child elements. Do you know of any references that can explain more? – Old Geezer Jul 31 '18 at 06:16
  • @OldGeezer It's more that `position: absolute` requires an ancestor that has a `position` other than `static`. I don't know why that particular design decision was made, but you can certainly try it without an ancestor to see what happens! – jhpratt Jul 31 '18 at 06:18
0

<html> does have some special properties, but in term of styling, you can think of it as any other block element (such as a <div>).

I assume you already understand what each of the position value do to an element. For absolute, the element is positioned relative to its closest positioned ancestor. If there is none, it is placed relative to the initial containing block, which is:

The containing block in which the root element (<html>) resides is a rectangle called the initial containing block. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).

So, if an element is absolutely positioned and does not have a relatively positioned parent, it will be positioned as if it is relative to the viewport. Hence your original observation.

Adding position: relative to the <html> element works for the same reason that it will work on any other elements.

Note that adding position: relative to the <html> element might result in your footer to rise up to the middle of the viewport if you have a short page, since the height of the <html> is determined by the height of the content. This can be easily remedied by setting the min-height of the html to 100%.

Chan MT
  • 495
  • 4
  • 9