Page position top, postop, scrolltop, offsetTop, scrollHeight, offsetHeight, clientHeight_html/css_WEB-ITnose

1.top

This property is only available when the object's position property is set. Otherwise, this property setting is ignored.

The code is as follows:

Test top

The above is a paragraph P contained in a DIV. You can see that after the top of P is set to -5px, Its top margin exceeds the top margin of the container DIV, and the excess distance is the set 5px.

It should be noted that the pair of DIV and P elements need to set position to absolute to get the desired result. If the parent element is not set, the reference of the child element will be defined in the upper layer. position element, until the entire document;

2.posTop

The value of posTop is actually the same as top, but the difference is that top fixes the element unit to px, while posTop is just a value , generally use posTop to perform operations.

3.scrollTop

The code is as follows:

Text here

This text cannot be completed within this 100*100 DIV Display, so if overflow is set to auto, it will appear an up and down sliding box. If the id.scrollTop attribute is not set, the sliding slider position will be at the top by default. After setting the scrollTop value to 12, the position of the slider changes, and the default display is text scrolled by 12 pixels. If you set overflow to hidden, the top 12 pixels of text will not be displayed.

Note that the setting method is id.scrollTop, not id.style.scrollTop.

4.offsetTop

If element A is the body element of HTML and its display attribute calculated value is none, or it does not have a CSS layout box, return 0 and stop this algorithm.

If the offsetParent of element A is null or the body element of HTML, return the vertical distance between the upper border of element A and the origin of the canvas in CSS pixels, and stop this algorithm.

Returns the distance between the top border of element A and the top border of its offsetParent in CSS pixels.

5. scrollHeight, offsetHeight and clientHeight

For document.body

clientHeight
Everyone has no objection to clientHeight, and they all think it is the height of the visible area of ​​the content. , that is to say, the height of the area where the content can be seen in the page browser is generally from the area below the last toolbar to above the status bar, and has nothing to do with the page content.

offsetHeight
IE and Opera consider offsetHeight = clientHeight scroll bar border.
NS and FF consider offsetHeight to be the actual height of the web page content, which can be smaller than clientHeight.

scrollHeight
IE and Opera consider scrollHeight to be the actual height of the web page content, which can be smaller than clientHeight.
NS and FF believe that scrollHeight is the height of the web page content, but the minimum value is clientHeight

For an HTML control

offsetHeight is the height of its own element, and scrollHeight is the height of its own hidden element. height.

The code is as follows:

Don't be a lover anymore. Be a cat. Be a dog. Don't be a lover. Be a pet. At least it's cute and charming. My friendship with you is meaningless. I will be hated by you tomorrow

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use