NEW
Font size
WorksheetsUnderstanding CSS Positioning Techniques
Total questions: 10
Worksheet time: 10mins
What is the default behavior of block-level elements in HTML?
They take up only as much space as their content.
They start a new line and take up 100% of the space provided by the parent element.
They can contain block-level elements but not inline elements.
They are positioned with respect to the browser window.
Which of the following is an example of an inline element in HTML?
<div>
<p>
<a>
<section>
What does the `position: relative;` property do to an element?
It removes the element from the normal flow and positions it with respect to the browser window.
It moves the element out of its normal-flow placement based on specified offsets.
It positions the element with respect to its nearest positioned ancestor.
It makes the element take up 100% of the available space.
In the context of CSS positioning, what does the `z-index` property control?
The horizontal position of an element.
The vertical position of an element.
The stacking order of elements.
The size of an element.
What happens to an absolutely positioned element if none of its ancestors have a `position` property set?
It is positioned with respect to the nearest ancestor with a `position` property.
It is positioned with respect to the top-left corner of the document.
It remains in its normal-flow position.
It is positioned with respect to the browser window.
Which CSS property would you use to move an element 150 pixels to the right using relative positioning?
`right: 150px;`
`left: 150px;`
`margin-right: 150px;`
`padding-left: 150px;`
What is the main disadvantage of using absolute positioning in CSS?
It makes elements take up 100% of the available space.
It can create maintenance headaches as elements are removed from the normal flow.
It does not allow for precise placement of elements.
It only works with inline elements.
How does fixed positioning differ from absolute positioning?
Fixed positioning is relative to the nearest positioned ancestor.
Fixed positioning is relative to the browser window.
Fixed positioning allows elements to remain in the normal flow.
Fixed positioning only works with block-level elements.
Which of the following elements is a block-level element by default?
<img>
<span>
<ul>
<label>
What is the effect of setting `position: absolute;` on an element without specifying `top`, `left`, `right`, or `bottom` properties?
The element will be positioned at the top-left corner of the document.
The element will remain in its normal-flow position.
The element will be positioned with respect to the nearest positioned ancestor.
The element will be positioned at the bottom-right corner of the document.
