In CSS, you can use the Position attribute to locate elements. The position attribute specifies the positioning type of the element.

Attribute values:

  • Absolute: Generates an absolute position relative to the first parent element other than the static position. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.

  • Fixed: Generates fixed positioned elements relative to the browser window. The position of the element is specified by the “left”, “top”, “right”, and “bottom” attributes.

  • Relative: Generates elements that are positioned relative to their normal position. Therefore, “left:20” adds 20 pixels to the left position of the element.

  • Static: the default value. Without positioning, the element appears in the normal stream (ignoring the top, bottom, left, right, or Z-index declarations).

Relative positioning:

Position relative to its normal position. (Can be used to fine tune the position of the label)

< HTML > <head> </title> <meta charset=" UTF-8 "> <style type="text/ CSS "> body{height: 2000px; } #span2{ position: relative; /* Set positioning mode to relative positioning */ top: 20px; left: 14px; } < / style > < / head > < body > < span id = "span1" > a < / span > < span id = "span2" > this is the second < / span > < span id = "span3" > this is three < / span > < / body > </html>Copy the code

Fixed position

Always position relative to the browser window.

< HTML > <head> <title> <meta charset=" UTF-8 "> <style type="text/ CSS "> body{height: 2000px; } div{ width: 500px; height: 300px; border:solid 2px red; position: fixed; /* Set positioning mode to fixed positioning */ bottom:500px 1px; } p{ float: right; } < / style > < / head > < body > < div > this is a div box < / div > < br > < p > this will not move < / p > < / body > < / HTML >Copy the code

Absolute positioning

Position relative to the first parent element other than the static position.

<head> <title> <meta charset=" utF-8 "> <style type="text/ CSS "> div{width: 500px; height: 400px; border: solid 2px red; /* Set relative position of div as section reference */ position: relative; } section{ width: 50px; height: 40px; background-color: yellow; position: absolute; / /* Section is always at the bottom right of the div */ /* Section is at the bottom right of the div */ /* Section is at the bottom right of the div */ /* Section is at the bottom right of the div */ /* Section is at the bottom of the div */ */ right: 0px; bottom: 0px; } </style> </head> <body> <div> <section></section> </div> </body>Copy the code