Positioning

CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when discussing design and layout. The CSS box model is essentially a box that wraps around every HTML element. The CSS box model consists of several components that create the structure surrounding an element. These components are:

• Content: The innermost part where text and images appear.

• Padding: The space between the content and the border, providing internal spacing within the box.

• Border: The edge around the padding, which can have varying thickness, styles, and colors.

• Margin: The outermost layer that creates space between an element's border and surrounding elements affects the spacing in the layout.

• Position: By default, the position property for all HTML elements in CSS is set to static. This means that it'll be static if you don't specify any other position value or if the position property is not declared explicitly.

Positioning

This property accepts five values: static, relative, absolute, fixed, and sticky. To learn more, watch the four-minute video "Learn CSS Positions" on YouTube.

Positioning:

Try it yourself with the following two positioning techniques:

.relative-box {
    position: relative;
    top: 20px;
    left: 20px;
    background-color: #ffcc00;
    padding: 10px;
}
.absolute-box {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: #00ccff;
    padding: 10px;
}

Further Resources

• Learn CSS Positioning in 9 minutes (Youtube)

• CSS Positioning – Position Absolute and Relative Example (Freecodecamp Article)

• Try it yourself: CSS Layout - The position Property

---

Help us improve the content 🤩

You can leave comments here.