본문으로 건너뛰기

Positioning

Positioning

The position attribute determines the placement method of HTML elements within a web page.


Static Positioning

static is the default positioning for all elements. If you do not specify a position, the elements are placed in their natural order automatically.

CSS
.box {
position: static;
}

Relative Positioning

relative positions the element relative to its normal position. For example, the CSS for the box class below moves the element to which the class is applied 20px to the left and 10px upwards.

CSS
.box {
position: relative;
left: 20px;
top: 10px;
}

Absolute Positioning

absolute positioning is determined relative to the nearest positioned ancestor that is not static. If there is no such ancestor, it positions relative to the body of the web page.

CSS
.box {
position: absolute;
top: 50px;
right: 30px;
}

Fixed Positioning

fixed positioning is relative to the browser window, meaning that the HTML element's position does not change even when you scroll the page. It is often used for creating floating buttons or navigation bars in the header that follow the scroll.

CSS
.box {
position: fixed;
bottom: 10px;
left: 10px;
}

Sticky Positioning

sticky positioning allows an element to move relative until a certain point is reached, at which it becomes fixed. It is often used to pin headers of a table or sidebar content in place.

CSS
.box {
position: sticky;
top: 0;
}

Follow the asterisk-highlighted part of the code to try inputting it.