CSS: Positioning

Question 1

What are Floats?

Answer 1

Floats are used to remove an element from its normal flow on the page and position it either on the left or right side of its container. When this happens, the text will wrap around that floated content.
float: left;
float: right;

Question 2

What are Clearing Floats?

Answer 2

The clear property is used to determine if an element needs to be moved below the floated content. When you have multiple floated elements stacked next to each other, there could be issues with overlap and collapsing in the layouts. So a clearfix hack was created to fix this issue.
.clearfix::after {
content: “”;
display: block;
clear: both;
}

Question 3

What is Static Positioning?

Answer 3

This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another.

Question 4

What is Relative Positioning?

Answer 4

This allows you to use the top, left, right and bottom properties to position the element within the normal document flow. You can also use relative positioning to make elements overlap with other elements on the page.
.relative {
position: relative;
top: 30px;
left: 30px;
}

Question 5

What is Absolute Positioning?

Answer 5

This allows you to take an element out of the normal document flow, making it behave independently from other elements.
.positioned {
position: absolute;
top: 30px;
left: 30px;
background-color: coral;
}

Question 6

What is Fixed Positioning?

Answer 6

When an element is positioned with position: fixed, it is removed from the normal document flow and placed relative to the viewport, meaning it stays in the same position even when the user scrolls. This is often used for elements like headers or navigation bars that need to remain visible at all times.
.navbar {
position: fixed;
top: 0;
width: 100%;
}

Question 7

What is Sticky Positioning?

Answer 7

This type of positioning will act as a relative positioned element as you scroll down the page. If you specify a top, left, right or bottom property, then the element will stop acting like a relatively positioned element and start behaving like a fixed position element.
.positioned {
position: sticky;
top: 30px;
left: 30px;
}