Concise CSS properties: positioning_html/css_WEB-ITnose

/* Extremely simple, seniors please ignore it*/

Chapter 1 Positioning (Positioning)

Keywords: position/z-index/top/bottom /right/left/clip

POSITION

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

static

Follow the normal document flow and do not set the top, bottom, left, and right values.

fixed

It is separated from the normal document flow, completely based on the browser window, and does not scroll with the scrolling of the mouse. Set the tblr value.

relative

Relative to what? Is offset relative to the element's original position in the document flow.

That is to say, if it should be at A according to the document flow, the relative attribute and left=10px are set;

Then the final position is: A is offset to the right by 10px.

Of course the size of this element will not change, thus causing it to cover other boxes.

Application: Elements with relative positioning values ​​are usually used as parent containers of elements with absolute positioning values.

absolute

Why is it called absolute? Because the element needs to be positioned, it must "absolutely" be searched from the inside to the outside of the container, looking for the element with the position attribute set (the default value of static is not counted). In other words, if X is set to absolute positioning, when positioning, it depends on whether the parent Y of Continue to see if Y's parent Z has a position set... If not, use the html element as the basis for positioning. The element breaks away from the normal document flow. Hence causing other boxes to be covered.

Application: By simply setting the absolute positioning attribute, the element can be positioned to any part of the web page. (Of course, it’s good to use the relative parent as a benchmark)

Okay. After introducing several position values, the word coverage was mentioned several times above.

So how to decide who goes up and who goes down when elements overlap? Here the z-index attribute is introduced.

Z-INDEX

By assigning a value to the z-index of each element, comparisons are made when overlapping, with the larger one at the top and the smaller one at the bottom. Usage: z-index: auto (default) | positive/negative value | inherit Usage: can only be used to position elements (that is, the position attribute value is set)

auto

Default value, with its parent The elements are consistent.

inherit

explicitly states that it must be inherited from the parent element.

Note: If the index values ​​are the same, the stacking order will be determined based on the order in which they appear in the document flow, with the later ones taking precedence.

Then there are top/bottom/left/right.

top/bottom/left/right

Set the offset. Usage: top: auto (default) |value|percentage Usage: only for positioned elements.

The value is expressed directly in px, etc. The percentage is relative to the parent container.

For example, if the left=50% of positioned element

clip

is used to clip elements (not limited to images). Usage: clip: auto (default) | rect (top, right, bottom, left) Usage: only used for elements with attributes position:absolute && overflow != visible.

auto does not crop

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

For example, if the original width of the image is 100px and right=10px is set in rect, then after cropping, the width of the image will be 10px. The right margin has been moved 90px to the left.

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

Positioning ends here.