CSS three common positioning by setting position positioning

CSS can be set to the element by setting a position property value, so that different elements will be displayed in different locations, or fixed display in a certain location, or displayed on a layer of page.

The value of the position can be set to relative,absolute,fixed,static.

Two blocks are defined in the HTML code:

1 <  class= "box">2     <class= "Box1"></div>3</Div  >

1. Relative positioning:

1{2    width: 50px;  3    height: 50px;  4    position: relative;  5    top: 50px;  6    left: 10px;  7 }

The code above will be implemented to move the box to the right of the original box position 50px, moving downward 10px.

2. Absolute positioning:

1{2    width: 10px;  3    height: 20px;  4    position: absolute;  5    top: 10px;  6    left: 10px;  7 }

The above code will implement the position of the box1 at the current viewport position as the origin of the base position to move the corresponding distance;

If the parent of Box1 is set to relative, then Box1 will be shifted at the origin of box.

1 . Box{2 position:relative;3}4 . Box1{5 width:10px;6 Height:20px;7 position:Absolute;8 Top:10px;9  Left:10px;Ten}

3. Fixed positioning:

1{2    width: 50px;  3    height: 50px;  4    position: fixed;  5    top: 20px;  6    left: 0px;  7 }

The above code will secure the box to the left edge of 20px at the top of the window.

Use note points:

1. Absolute positioning will leave the element out of the document flow, and the element behind the anchor element will move to the position of the element to fill the blank area;

2. Under normal circumstances, absolute positioning will be used in conjunction with Ixnagdui;

3. When using fixed and absolute, be sure to identify who is the base position.

Example: The implementation displays the picture in a fixed position (not the top or bottom) of the window, and does not change the relative position of the element with the zoom of the windows.

1 <Divclass= "Aside-cover">2     <Divclass= "Cover">3          <Divclass= "Aside-left">4               <imgsrc= "Img/batlogox.png"alt= "Left"/>5          </Div>6     </Div>7 </Div>

. Cover{width:500px;Height:364px;margin:Auto;position:relative;}/*second-level sub-absolute positioning*/. Aside-left{width:60px;Height:94px;position:Absolute;Top:422px; Left:-0.2%;Overflow:Hidden;}/*Image relative positioning*/. Aside-left img{position:relative; Left:-64px;Top:-125px;}

The above code enables you to display the image content area you want to display in a fixed position in the window.

　

CSS three common positioning by setting position positioning