CSS formatting and layout

First, Position

1. Absolute positioning

Position:absolute: Absolute positioning.

The absolute position means that the position of the browser's border is returned to its rightful place. That is, a DIV uses absolute positioning after the leftmost position in the top-left corner of the browser's border. At this point, you can change the position by using the tabs up or down.

            #a1 {                width:200px;                height:200px;                Background-color:burlywood;                Position:absolute;                top:10px;                left:10px;            }         </style

2. Fixed position

POSITION:FIXD: Fixed position

Similarly, the fixed position is relative to the browser border. Note, however, that the value cannot be negative.

Position:fixed;

3. Relative position

Position:relative: Relative position

Move relative to the position where it originally appeared.

            #a1 {                width:200px;                height:200px;                Background-color:burlywood;                position:relative;                top:50px;                    }

Second, the flow

1. Float: Stream

in which direction to flow, then the element will follow in which direction.

→

            #liu {                width:900px;                height:50px;            }            . lift{                    float: left;                            }            

→

2. Clear Stream

Either float or position, it floats on the top floor. When we are all using float flow, the lower layer will cover the upper layer. And this time to avoid problems, we need a clear stream.

Bug:

This time we need to clear a stream:

Clear:both: Clears all

→

Third, the text style is centered

            . lift{                    float: left;                width:100px;                height:50px;                Text-align:center;                Vertical-align:middle;                line-height:50px;                Margin-left:7px;                Background-color:cornflowerblue;                            }

Iv. Z-index Layering

Corresponds to a sequence number of the z-axis.

property to set the stacking order of the elements. Elements that have a higher stacking order are always in front of elements that are lower in stacking order.

Z-index can only have effects on positioned elements (e.g. position:absolute;)

            #no1 {                width:200px;                height:100px;                Background-color:black;                Position:absolute;                Z2;            }            #no2 {                width:300px;                height:50px;                Background-color:yellow;                Position:absolute;                Z1;            }            

The bigger the Z-index, the higher the value.

→

CSS formatting and layout