CSS sets three common positions for position positioning, cssposition

CSS sets three common positions for position positioning, cssposition

In CSS, you can set a position attribute value for an element to display different elements in different positions, fixed positions, or pages.

PositionCan be setRelative,Absolute,Fixed,Static.

Two blocks are defined in the HTML code:

1 <div class="box">2     <div class="box1"></div>3 </div>

1. Relative positioning:

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

The above code moves the box 50px to the right at the initial position of the box, and moves 10 PX down.

2. Absolute positioning:

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

The above code moves the box1 position to the origin of the current viewport position as the reference position;

If relative is set for the parent box1, The box1 will be shifted based on the origin of the box.

 1 .box { 2     position: relative; 3 } 4 .box1 { 5     width: 10px; 6     height: 20px; 7     position: absolute; 8     top: 10px; 9     left: 10px;10 }

3. Fixed positioning:

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

The above code will fix the box to the left edge position of 20 px from the top of the window.

Note:

1. Absolute positioning will remove the element from the document stream. The element located after the positioning element will be moved to the position of the element to fill the blank area;

2. In general, it will be used together with ixnagdui in absolute positioning;

3. When using fixed and absolute, you must identify who is the benchmark position.

Instance:The image is displayed in a fixed position (not the top or bottom) of the window, and the relative position of the element is not changed as the window scales.

1 <div class="aside-cover">2     <div class="cover">3          <div class="aside-left">4               5          </div>6     </div>7 </div>

. Cover {width: 500px; height: 364px; margin: auto; position: relative;}/* level 2 sublevel absolute positioning */. aside-left {width: 60px; height: 94px; position: absolute; top: 422px; left:-0.2%; overflow: hidden;}/* relative position of the image */. aside-left img {position: relative; left:-64px; top:-125px ;}

With the above code, you can display the image content area to a fixed position in the window.