curriculum/challenges/english/blocks/quiz-css-positioning/66ed8ffcf45ce3ece4053eb5.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
Which of the following is NOT a valid value for the position property?
fixed
absolute
relative
above
What is the main purpose of the float property in CSS?
Floats are used to remove an element from its normal flow on the page and automatically position it in the upper right hand side of the webpage.
Floats are used to remove an element from its normal flow on the page and position it to the top of its container.
Floats are used to remove an element from its normal flow on the page and automatically position it to the bottom right hand side of webpage.
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.
Which of the following is an example making a box element float to the left?
.box {
left: float;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}
.box {
position: float-left;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}
.box {
float: left-side;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}
.box {
float: left;
margin-right: 15px;
width: 50px;
height: 50px;
background-color: black;
}
What is the role of the clear property?
It is used to determine if an element needs to be moved to the bottom of the page.
It is used to determine if an element needs to be completely cleared from the page.
It is used to determine if an element needs to be fixed to the top of the page.
It is used to determine if an element needs to be moved below the floated content.
Which CSS property is used to control the vertical stacking order of positioned elements that overlap on the page?
position
bg-green
float
z-index
Which of the following is the correct syntax for relative positioning?
.relative {
position: relative-position;
top: 30px;
left: 30px;
}
.relative {
relative-position: relative;
top: 30px;
left: 30px;
}
.relative {
relative: position;
top: 30px;
left: 30px;
}
.relative {
position: relative;
top: 30px;
left: 30px;
}
Which CSS property would you use to fix an element at a certain position on the page so that it does not move when scrolling occurs?
position: no-scroll;
position: relative;
display: block;
position: fixed;
What does absolute positioning do to an element?
Absolute positioning is used to determine if an element needs to be moved below the floated content.
Absolute positioning is used to position the element within the normal document flow.
Absolute positioning is used to control the vertical stacking order of positioned elements that overlap on the page.
Absolute positioning allows you to take an element out of the normal document flow, making it behave independently from other elements.
Which of the following is NOT a valid property that you can use for absolute positioning?
right
bottom
top
side
What is the key difference between relative and absolute positioning?
Absolute positioning sets the element in a sticky position while relative positioning takes an element out of the normal document flow.
Relative positioning sets the element in a fixed position while absolute positioning takes an element out of the normal document flow.
Absolute positioning positions the element within the normal document flow while relative positioning takes an element out of the normal document flow.
Relative positioning positions the element within the normal document flow while absolute positioning takes an element out of the normal document flow.
Which of the following is an example of positioning a box in the upper left hand corner of the page?
.box {
position: absolute;
bottom: 0;
left: 0;
background-color: coral;
width: 50px;
height: 50px;
}
.box {
position: absolute;
top: 0;
right: 0;
background-color: coral;
width: 50px;
height: 50px;
}
.box {
position: absolute;
bottom: 0;
right: 0;
background-color: coral;
width: 50px;
height: 50px;
}
.box {
position: absolute;
top: 0;
left: 0;
background-color: coral;
width: 50px;
height: 50px;
}
Which positioning method allows an element to stick to a defined position only when you scroll past a certain point?
Float positioning.
Fixed positioning.
Absolute positioning.
Sticky positioning.
Which of the following is a correct example of using sticky positioning?
.box {
sticky: position;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}
.box {
position: sticky-fixed;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}
.box {
position: sticky-top;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}
.box {
position: sticky;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: red;
}
What is the difference between sticky and fixed positioning?
Sticky elements can only be used in table layouts while fixed elements can be used in any type of CSS layout.
Sticky elements will always remain in the same position while fixed elements will stick to a certain point then behave like relative elements.
Fixed elements will be positioned relative to its normal position while sticky elements will only stick to a certain point then behave like relative elements.
Fixed elements will remain in the same position on the screen while sticky elements will only stick to a certain point then behave like relative elements.
What problem did the clearfix hack solve when working with floats?
The clearfix hack helped solve the issue of floated elements being removed from the normal document flow and being placed in a fixed position on the page.
The clearfix hack helped solve the issue of floated elements not being responsive in mobile and tablet layouts.
The clearfix hack helped solve the issue of floated elements disappearing from the page.
The clearfix hack helped solve the issue of overlaps and collapsing in the layouts when multiple floated elements were stacked next to each other.
Which of the following is a correct example for using the clearfix hack?
.clearfix::before {
position: fixed;
top: 0;
width: 100%;
clear: both;
}
.clearfix::after {
position: relative;
top: 30px;
left: 30px;
clear: all;
}
.clearfix::before {
top: 30px;
clear: none;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
What is static positioning?
This is used to remove an element from its normal flow on the page and automatically position it in the upper right hand side of the webpage.
This allows you to take an element out of the normal document flow, making it behave independently from other elements.
This allows an element to stick to a defined position only when you scroll past a certain point.
This is the normal flow for the document. Elements are positioned from top to bottom and left to right one after another.
Which of the following is an example of setting the navbar to the top of the page using fixed positioning?
.navbar {
fixed: top;
top: 0;
width: 100%;
}
.navbar {
upper: fixed;
width: 100%;
}
.navbar {
position: fixed-top;
top: 0;
width: 100%;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
}
Which of the following is a valid value to use for the z-index property?
12.0
none
up
1
Which of the following is the default value of the position property?
inherit
initial
relative
static
Which position value lets you adjust an element's position with top and left while keeping it within the normal document flow?
position: absolute;
position: static;
position: fixed;
position: relative;
How does an element with position: sticky; initially behave?
It behaves like a fixed element until a scroll position is reached.
It is always removed from the normal document flow.
It behaves like an absolute element within its parent.
It behaves like a relative element until a specified scroll position is met.
Which of the following demonstrates a valid and effective use of the z-index property to make .box-two appear on top of .box-one?
.box-one {
position: static;
z-index: 2;
}
.box-two {
position: static;
z-index: 1;
}
.box-one {
position: absolute;
stack-order: 1;
}
.box-two {
position: absolute;
stack-order: 2;
}
.box-one {
float: left;
z-index: 1;
}
.box-two {
float: left;
z-index: 2;
}
.box-one {
position: absolute;
z-index: 1;
}
.box-two {
position: absolute;
z-index: 2;
}
What is the z-index property used for in CSS?
It sets the zoom level of the page.
It controls the horizontal alignment of elements within a flex container.
It defines the spacing between an element's content and its border.
It controls the vertical stacking order of positioned elements that overlap.
When you apply top: 10%; to an element with position: fixed;, what is the 10% calculated in relation to?
The height of the element itself.
The height of its parent container.
The width of the viewport.
The height of the viewport.
Which of the code examples is a correct use of the z-index property to place an overlay above other content?
.overlay {
z-index: 5;
background-color: black;
}
.overlay {
display: block;
z-layer: 1;
background-color: black;
}
.overlay {
float: left;
z-index: 2;
background-color: black;
}
.overlay {
position: absolute;
z-index: 10;
background-color: black;
}
Which CSS property is used to control whether an element should be moved below floated elements?
float
overflow
display
clear
How will an element with position: relative; and bottom: 25px; be moved?
It will move 25px down from its normal position.
It will move 25px to the right of its normal position.
It will be positioned 25px from the bottom of the viewport.
It will move 25px up from its normal position.
The z-index property will only affect elements that have what CSS property applied?
A float value other than none.
A display value of inline-block.
A background-color set.
A position value other than static.
What would be the effect of applying float: right; to a logo in a header?
The logo would be aligned to the right, but would remain in the normal document flow, preventing other content from wrapping.
The logo would be taken out of the flow and positioned on the right side of the entire browser viewport, not its container.
The logo would become a block-level element that takes up the full width of the header, pushing other elements below it.
The logo would be removed from its normal flow and placed on the right side of its container, with other content wrapping around it.
Which CSS snippet will keep an element fixed to the top of the viewport once it is scrolled to?
.header {
position: fixed;
top: 0;
}
.header {
position: relative;
top: 0;
}
.header {
position: absolute;
top: 0;
}
.header {
position: sticky;
top: 0;
}
What is the specific purpose of clear: both; in CSS?
It cancels out the float property on the element itself, returning it to the normal document flow.
It removes any clear properties that were inherited from a parent element, restoring the default floating behavior.
It only clears floated elements that are on the right side, allowing left-floated elements to remain as they are.
It ensures the element is moved below any floated elements that appear before it on both the left and right sides.
Given the following code, how will .child be positioned?
.parent {
/* No position property set */
height: 200px;
}
.child {
position: absolute;
top: 10px;
}
It will be positioned 10px from the top of the .parent element, as absolute positioning is always relative to the direct parent.
It will remain in its default static position because the absolute value is invalid without a z-index property.
It will be positioned 10px from the top of the browser window, remaining fixed in place even when the user scrolls the page.
It will be positioned 10px from the top of the initial containing block, such as the <body>, because its parent is not positioned.
What effect will the following CSS have on the .box element?
.box {
position: absolute;
top: 50px;
left: 50px;
}
The element will remain in its normal flow but will be indented by 50px from the top and left, pushing other elements away.
The element will be fixed to the viewport and will stay 50px from the top and 50px from the left, even when the page is scrolled.
The element will be positioned relative to its own starting point, moving 50px down and 50px to the right without leaving the document flow.
The element will be taken out of the normal flow and placed 50px from the top and 50px from the left of its nearest positioned ancestor.
Which of the following position values removes an element entirely from the document's normal flow?
position: static;
position: relative;
position: inherit;
position: absolute;
Given a .parent and a .child element, which CSS snippet will correctly position the .child 20px from the top left corner of the .parent element?
.parent {
/* position: static; by default */
}
.child {
position: absolute;
top: 20px;
left: 20px;
}
.parent {
position: relative;
}
.child {
position: relative;
top: 20px;
left: 20px;
}
.parent {
position: relative;
}
.child {
float: left;
top: 20px;
left: 20px;
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 20px;
left: 20px;
}
What is the difference between static and relative positioning?
static positioning removes an element from the document flow, while relative positioning keeps it in the flow.
An element with position: static; can be offset with the top and left properties, while position: relative; cannot.
static positioning is for block-level elements, while relative positioning is only intended for inline elements.
Both keep an element in the normal document flow, but relative allows the element to be offset from its original position.
Which CSS snippet correctly floats an image to the left, allowing other content to wrap around it?
.image {
position: absolute;
left: 0;
}
.image {
display: inline-block;
}
.image {
text-align: left;
}
.image {
float: left;
}
What is the difference between absolute and fixed positioning?
absolute positioning is relative to the viewport, while fixed positioning is relative to the nearest positioned ancestor.
absolute positioning keeps the element in the normal document flow, while fixed positioning removes it from the flow.
Both are positioned relative to the viewport, but fixed elements will scroll with the page while absolute elements will not.
absolute positioning is relative to the nearest positioned ancestor, while fixed positioning is relative to the browser viewport.
Which position value places an element in the normal document flow and prevents offset properties like top and left from having any effect?
position: relative;
position: absolute;
position: fixed;
position: static;