Web page localization

1.1.1 Web pages targeting type:

a) static positioning (static) is the default positioning

b) the relative positioning (relative)

c) Absolute positioning (absolute)

d) positioning a fixed (fixed to the browser compatibility issues positioning)

e) reference

 

1.1.2 Relative positioning

position:relative;

top: 20px; refers to a top position shift occurs 20px

left: 10px; reference position deviation of the left 10px

 

right and bottom are not commonly used.

note:

  • Positioned offset relative to its previous position with reference to the current element latest occurring
  • The occurrence of relatively positioned elements will not affect other elements
  • It took place relatively-positioned elements still in the normal document flow

 

For example: the relative positioning of the front:

 

     After relative positioning:

 

 

 

 

1.1.1 Absolute positioning

position:absolute;

top: 20px; refers to a top position shift occurs 20px

left: 10px; reference position deviation of the left 10px

 

note:

  • Absolutely positioned elements occurred with reference to the parent element positioning occurred recently, layer by layer to find if all the parent element does not exist positioned directly referring to the body element.
  • Recent positioned parent element occurring as a reference, positioning it happened only relatively (relative ) or absolute (positioning), simply can not move the location as a reference.
  • Only the parent element positioned such that the alignment occurs, but not necessarily be offset occurs (only positioning positional deviation does not occur);
  • Absolutely positioned elements will take place from the document flow, impact on other elements.

For example: Absolute Positioning ago

 

 

After the absolute positioning: positioning the yellow box occur, so as a reference

 

 

 

 

 

 

1.1.1 fixed positioning

Fixed and absolute positioning is basically the same, fixed positioning of elements will not end with the browser scroll bars and scrolling. Common web advertising is doing.

position:fixed;

top:40px;

left:300px;

Guess you like

Origin www.cnblogs.com/alexjava/p/11514585.html