Concise CSS attributes: positioning

/* Ignore the simple predecessors */

Positioning)

　　

POSITION

• This attribute is used to determine the position of an element on the page.
• Usage: position: static (default) | fixed | relative | absolute

Static

• Observe the normal document stream, and do not set top, bottom, left, right values.

Fixed

• The file stream is separated from the normal Document Stream. the browser window is used as a reference and does not scroll with the mouse. Set the tblr value.

Relative

Application: FetchRelative positioningThe value element is usuallyAsFetchAbsolute PositioningValue ElementParent levelContainer.

Absolute

Application: by setting only the absolute positioning attribute, you can let the element locate any part of the webpage. (Of course, it's good to use relative parent level as the benchmark)

 

Okay. After the introduction of the position values, the overwrite term is mentioned several times.

So how can we determine who goes up and down when elements overlap? The z-index attribute is introduced here.

Z-INDEX

• Assign a value to the z-index of each element. When the element is overlapped, the value is greater than the upper and lower values.
• Usage: z-index: auto (default) | positive/negative | inherit
• Usage: it can only be used to locate elements (I .e. set the position attribute value)

Auto

Default Value, consistent with its parent-level element.

Inherit

It is clearly indicated that it must inherit from the parent element.

 

Note: If the index values are the same, the order of stack is determined based on the order in which they appear in the document stream.

 

Then top/bottom/left/right.

Top/bottom/left/right

• Set the offset.
• Usage: top: auto (default) | value | percentage
• Usage: used only to locate elements.

Values are directly expressed in px. The percentage is relative to the parent container.

For example, if left = 50% of the positioning element X and its parent container is Y (Y_width), the offset is equivalent to left = Y_width * 50%.

 

Clip

• Used to crop elements (not limited to images ).
• Usage: clip: auto (default) | rect (top, right, bottom, left)
• Usage: used only for the position: absolute & overflow visible element.

Auto not crop

The four parameters in rect are pixel values. The four values are relative to the (0, 0) Point in the upper left corner of the image.

If the original image width is PX and the right is set to 10px in the rect, the width of the cropped image is 10px. The right margin is shifted to 90px.

-----------------------------------------------------

Locate to end.