What are the positioning attributes in css

The positioning property in CSS is used to control the position of an element relative to its parent element or other elements. The main positioning attributes include: static: The element occupies a position in the normal document flow. relative: The element is offset relative to its current position but remains in the document flow. absolute: The element is removed from the document flow and positioned relative to its nearest parent element that has a positioning attribute. fixed: The element is fixed in the viewport and positioned relative to the browser window.

Positioning properties in CSS

Positioning properties are the key in CSS to control the position of elements in the document Attributes. It is mainly used to determine the position of an element relative to its parent or other elements.

Different types of positioning attributes

The following main positioning attributes are provided in CSS:

• static: element Occupies a position in the normal document flow, unaffected by positioning attributes. This is the default targeting attribute.
• relative: The element is offset relative to its current position but remains in the document flow.
• absolute: The element is taken out of the document flow and positioned relative to its nearest parent element that has the positioning attribute.
• fixed: The element is fixed in the viewport, positioned relative to the browser window, and will not move even if the page is scrolled.

Positioning Example

The following code example demonstrates the use of different positioning properties:

/* static定位 */
p {
  color: blue;
}

/* relative定位 */
div {
  position: relative;
  top: 20px;
  left: 50px;
}

/* absolute定位 */
span {
  position: absolute;
  top: 0;
  right: 0;
}

/* fixed定位 */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

This will create a paragraph of blue text ( static positioning), a div offset 20px up and 50px left relative to itself (relative positioning), a span positioned relative to the top and right of its parent element (absolute positioning), and a div fixed to the top and left of the page Navigation bar (fixed positioning).

The above is the detailed content of What are the positioning attributes in css. For more information, please follow other related articles on the PHP Chinese website!