Relative usage of Position attribute _ javascript skills

Relative is a property of position and relative positioning. This article introduces the Relative usage of Position, if you are interested in the position property relative, learn it together. Relative is an attribute of position and relative positioning.

The default value of position is static (that is to say, if any element does not define its position attribute, its position: static)

If you want a p # sub in this # demo to locate somewhere in the upper-right corner of the # demo, you should locate # demo relative to # sub absolute position.

Absolute is located relative to its nearest parent element. if you do not give # demo relative positioning, # sub absolute positioning is located relative to the body.

Relative is located relative to itself, for example: # demo {position: relative; top:-50px;}. at this time, # demo will shift 50px relative to its original position.

In addition, relative is not separated from the document stream, and absolute is separated from the document stream. That is to say, although relative elements seem to deviate from the original position, it remains unchanged in the document stream. The absolute element not only changes its position, but also disconnects from the document stream.

Position: usually set to the parent layer of position: absolute; in daily relative applications, if the parent layer position: relative; sub-layer position: absolute, it is located according to the boundary of the parent layer. otherwise, position: absolute searches for the element boundary of position: relative layer by layer until the body element ..

An example is written as follows:

Html code

Static: default value. No special Positioning. objects follow HTML positioning rules.

Absolute: drag an object out of the document stream and use left, right, top, bottom, and other attributes to absolutely locate the parent object with the most positioning settings relative to the object closest to it.

If such a parent object does not exist, it is based on the body object. Its stack is defined by the z-index attribute.

Fixed: not supported. Object positioning follows the absolute (absolute) method. But comply with some rules

Relative: objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.

"Quality =" high "type =" application/x-shockwave-flash "pluginspage =" http://www.macromedia.com/go/getflashplayer ">   
  Position      
     
Static: default value. No special Positioning. objects follow HTML positioning rules.
     
Absolute: drag an object out of the document stream and use left, right, top, bottom, and other attributes to absolutely locate the parent object with the most positioning settings relative to the object closest to it. If such a parent object does not exist, it is based on the body object. Its stack is defined by the z-index attribute.
     
Fixed: not supported. Object positioning follows the absolute (absolute) method. But comply with some rules
     
Relative: objects cannot be stacked, but will be offset in normal document streams based on left, right, top, bottom, and other attributes.
   
   

The above is a full description of the relative usage of the position attribute shared by Xiaobian. I hope you will like it.