CSS positioning,

CSS positioning,
CSS positioning

The display attribute can be used to change the type of the generated box. For example, if the attribute is set to block, the row element can be represented as a block-level element. If the display attribute is set to none, the generated elements have no frame at all. In this way, the box and all its content will not be displayed.

However, in one case, block-level elements are created even if no explicit definition is made. This occurs when some text is added to the beginning of a block-level element (such as a div. Even if these texts are not defined as paragraphs, they are treated as paragraphs:

<div>some text<p>Some more text.</p></div>

Css has three basic positioning mechanisms:Normal stream, floating and absolute positioning
Unless otherwise specified, all frames are located in the normal stream.

Css position attribute:
Static
Relative location of relative
Absolute location of absolute
Fixed Positioning

h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}

Relative positioning moves the element based on its original position.
Style "left:-20px": Subtract 20 pixels from the original left position of the element.
Style "left: 20px" adds 20 pixels to the original left position of the element.

h2.pos_abs{position:absolute;left:100px;top:150px}

<P> with absolute positioning, elements can be placed anywhere on the page. The title below is Px to the left of the page and PX to the top of the page. </P>

Overflow: scroll;
This attribute defines how the content of the overflow element content area will be processed.
If the value is scroll, the user agent provides a rolling mechanism whether or not required.
If the value is hidden, the overflow content is hidden.
If the value is auto, the browser will automatically handle overflow.

Set element shape
Clip attributes
Rect (top, right, bottom, left)
Clip: rect (0px 50px 200px 0px)

Vertically arranged Images
Vertical-align value:
Text-top element top alignment font top
The middle element is placed in the middle of the parent element.
The top of the bottom element is aligned with the top of the lowest element.
Align the bottom of the text-bottom element with the bottom of the font

Set the stacking order of elements z-index
Elements with a higher stacking order are always in front of elements with a lower stacking order.
The default value of z-index is 0. If z-index is-1, it is placed after another element.