Css position usage and js processing method for page Deformation

Source: Internet
Author: User

Absolute position and relative position usage in position

Positioning: position: absolute; syntax: <div style = "position: absolute; left: 100px; top: 100px"> </div>
There are two scenarios:
1. If top, right, bottom, and left are not set, the "content region original point" of the parent level is the original point by default.
2. If top, right, bottom, and left are set, the following two situations are involved:
(1) the parent class does not have the position attribute. In the browser, the upper left corner (that is, the body) is the "original coordinate point" for positioning. The position is determined by the top, right, bottom, and left attributes.
(2) the parent level has the position attribute, and the "original coordinate point" of the parent level is the original point.

Relative positioning: position: relative;
The "original point of content area" in the parent level is the original point. If there is no parent level, the "original point of content area" in the body is the original point. The position is determined by the top, right, bottom, and left attributes, it occupies the same size outside the parent block, so it is not recommended.

Whether relative positioning or absolute positioning, note that
Only one left and right can be set.
Either top or bottom can be set

If the page is deformed due to position, the following js code can be used to solve the problem.

Var ietest = function ()
{
If ($. browser. msie ){
If ($. browser. version = "6.0 ")
{
Var _width1_document.doc umentelement. clientwidth + 29; // desktop resolution size
$ ("# Nav" ).css tutorial ("left", (_ width-950)/2)-15); // reset the value
Return false;
}
Return false;
}
Return false;
}
Window. onresize = ietest; // event triggered when the form is scaled


Position attribute. We can select four different types of positioning, which affects the method of generating element boxes.

Meaning of the position property value:

Static
The element box is generated normally. Block-level elements generate a rectangular box. As part of the document stream, one or more row boxes are created for the element in the row and placed in the parent element.
Relative
The element box offsets a certain distance. The element remains in the shape before its position, and its original space remains.
Absolute
The element box is completely deleted from the document stream and located relative to its contained block. The inclusion block may be another element in the document or an initial inclusion block. The space occupied by the element in the normal document stream will be closed, as if the element did not exist. After the element is located, a block-level box is generated, regardless of the type of box it generated in the normal stream.
Fixed
The element box is similar to setting position to absolute, but its contained block is the window itself.
Tip: relative positioning is actually considered part of the normal stream positioning model, because the element position is relative to its position in the normal stream.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.