Hướng dẫn position trong css w3schools

Example

Position an

element:

Nội dung chính Show

• Definition and Usage
• Browser Support
• Property Values
• More Examples
• Related Pages
• The position Property
• position: static;
• position: relative;
• position: fixed;
• position: absolute;
• position: sticky;
• Positioning Text In an Image
• More Examples
• All CSS Positioning Properties

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

Try it Yourself »

More "Try it Yourself" examples below.

---

Definition and Usage

The position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note: The sticky value is not supported in Internet Explorer or Edge 15 and earlier versions.

CSS Syntax

position: static|absolute|fixed|relative|sticky|initial|inherit;

Property Values

More Examples

Example

How to position an element relative to its normal position:

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

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

Try it Yourself »

Example

More positioning:

#parent1 {
  position: static;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}

#child1 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

#parent2 {
  position: relative;
  border: 1px solid blue;
  width: 300px;
  height: 100px;
}

#child2 {
  position: absolute;
  border: 1px solid red;
  top: 70px;
  right: 15px;
}

Try it Yourself »

Related Pages

CSS tutorial: CSS Positioning

HTML DOM reference: position property

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

The position Property

The position property specifies the type of positioning method used for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This