0
0
CSSmarkup~5 mins

Position relative in CSS - Cheat Sheet & Quick Revision

Choose your learning style9 modes available
Recall & Review
beginner
What does position: relative; do to an element in CSS?

It keeps the element in the normal page flow but allows you to move it slightly using top, right, bottom, or left without affecting other elements.

Click to reveal answer
beginner
How does position: relative; affect the space the element takes on the page?

The element still takes up its original space as if it was not moved. The movement is visual only.

Click to reveal answer
beginner
Which CSS properties can you use to move an element with position: relative;?

You can use top, right, bottom, and left to shift the element from its original position.

Click to reveal answer
beginner
True or False: An element with position: relative; can overlap other elements.

True. Because you can move it visually, it can overlap other elements without changing the layout space.

Click to reveal answer
intermediate
Why might you use position: relative; instead of position: absolute;?

Because relative keeps the element in the normal flow, so other elements stay where they should, while absolute removes it from the flow and can cause layout shifts.

Click to reveal answer
What happens to the space of an element when you apply position: relative; and move it with top: 10px;?
AThe element becomes fixed on the screen.
BThe space moves with the element, shifting other elements.
CThe element disappears from the page.
DThe element moves visually but the original space stays the same.
Which property does NOT work with position: relative; to move the element?
Atop
Bleft
Cmargin
Dbottom
If you want to move an element but keep the page layout unchanged, which position value is best?
Arelative
Bstatic
Cabsolute
Dfixed
What is the default position value of HTML elements?
Astatic
Babsolute
Cfixed
Drelative
Can an element with position: relative; be used as a reference for absolutely positioned child elements?
ANo
BYes
COnly if it has a z-index
DOnly if it has a fixed width
Explain in your own words how position: relative; affects an element's position and the layout around it.
Think about moving a picture on a wall without changing the wall space it occupies.
You got /4 concepts.
    Describe a practical situation where using position: relative; is better than position: absolute;.
    Imagine adjusting a photo frame slightly without moving the furniture around it.
    You got /4 concepts.