IES: CSS-deck 8

Question 1

Assigning a non-default value to an element position property allows what?

Answer 1

An element’s place moves from the normal flow to where it can be independently positioned is allowed by assigning a \_\_\_\_\_ value to the element’s position property.

Question 2

Alternatives to the default “static” value:

Answer 2

“Absolute”, “relative”, “fixed”, and “sticky” are keywords specifying alternative to the normal flow layout.

Question 3

The positioning schemes, “absolute”, “relative”, “fixed”, and “sticky;” each use one or more of which CSS “offset” properties: to define the element’s position.

Answer 3

Which positioning schemes use one or more of the CSS offset properties: “top,” “right,” “bottom,” and “left;” to define what?

Question 4

“Absolute” positioning: places the element at the specified offset distance from the \_\_\_\_\_ of its containing element.
(an absolutely positioned division element with top and left values of 100px will be positioned how?)

Answer 4

\_\_\_\_\_ positioning places the element at the specified offset distance from the boundaries of its containing element.
(An \_\_\_\_\_ positioned division element with \_\_\_\_\_ and \_\_\_\_\_ values of 100px will be positioned 100px below and 100px to the right of its containing element boundaries.)

Question 5

\_\_\_\_\_ positioning adjust the element position \_\_\_\_\_ to the place it would originally occupy in normal flow layout.
(Ex. top value: \_\_\_\_\_ px; left value: \_\_\_\_\_ px; = Element moves up 18px and 100px to the right. Regardless, the \_\_\_\_\_ \_\_\_\_\_ by its original layout position is preserved.)

Answer 5

“Relative” positioning adjust the element position relative to the place it would \_\_\_\_\_ \_\_\_\_\_ in normal flow layout.
(Ex. top value: -18px; left value: 100px; = Element moves \_\_\_\_\_ 18px and 100px to the \_\_\_\_\_ . Regardless, the space occupied by its original layout position is \_\_\_\_\_ .)

Question 6

When a page is \_\_\_\_\_ , absolute and relative elements move along with the rest of the page.

Answer 6

When a page is scrolled, \_\_\_\_\_ and \_\_\_\_\_ elements move along with the rest of the page.

Question 7

\_\_\_\_\_ positioning may typically control the position of the outer element.

Answer 7

“Absolute” positioning may typically control the position of the \_\_\_\_\_ \_\_\_\_\_.

Question 8

“Relative” positioning is often useful to control the position of \_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_.

Answer 8

\_\_\_\_\_ positioning is often useful to control the position of nested Inner elements.

Question 9

Fixed positioning completely removes the content box from the \_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_ and positions it relative to the \_\_\_\_\_ or the \_\_\_\_\_ \_\_\_\_\_.

Answer 9

\_\_\_\_\_ positioning completely removes the content box from the normal flow layout and positions it relative to the viewport or the browser window.

Question 10

Fixed: Usefully, elements can be fixed to maintain a constant position regardless of \_\_\_\_\_ \_\_\_\_\_.

Answer 10

\_\_\_\_\_ : elements, like a logo, can be set to maintain a \_\_\_\_\_ position regardless of page scrolling.

Question 11

As of 2019 and possibly 2020, the Safari web browser did not support the sticky positioning scheme.

Answer 11

Until implemented, a position : -webkit-sticky ; rule is required for this browser

Question 12

Sticky positioning: ensures element \_\_\_\_\_ regardless of page scrolling.

Answer 12

Sticky positioning: ensures element visibility regardless of \_\_\_\_\_ \_\_\_\_\_.

Question 13

Sticky positioning: initially -places and maintains element \_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_; assumes a sticky or fixed position -when scrolling effects the element reaches a specified offset position in the viewport.`

Answer 13

Sticky positioning: initially -places and maintains element relative to other Sticky positioning: initially -places and maintains element relative to other elements; assumes a sticky or fixed position -when scrolling effects the element reaches a \_\_\_\_\_ \_\_\_\_\_ position in the viewport.

Question 14

Sticky positioning: \_\_\_\_\_ \_\_\_\_\_ to the specified offset position causes the element to resume its relative positioning.

Answer 14

Sticky positioning: scrolling back to the specified offset position causes the element to \_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_ positioning.

Question 15

Sticky positioning: As with \_\_\_\_\_ positioning, element positions can be \_\_\_\_\_ to emulate a frame-style interface.

Answer 15

Sticky positioning: As with fixed positioning, element positions can be sticky to emulate a \_\_\_\_\_ \_\_\_\_\_.

Question 16

Changing from the default position property to the absolute allows elements to \_\_\_\_\_ or \_\_\_\_\_.

Answer 16

Changing from the \_\_\_\_\_ position property to the \_\_\_\_\_ allows elements to overlap or stack.

Question 17

Stacking order can be explicitly specified in CSS by assigning an integer value, negative or otherwise, to the \_\_\_\_\_ property.

Answer 17

Stacking order can be explicitly specified in CSS by assigning \_\_\_\_\_ \_\_\_\_\_ value to the z-index property.

Question 18

Z-index property: the element with the \_\_\_\_\_ value appears uppermost; then beneath, the element with the \_\_\_\_\_ \_\_\_\_\_ value; and so on.

Answer 18

\_\_\_\_\_ property: the element with the highest value appears uppermost; then beneath, the element with the next highest value; and so on.

Question 19

\_\_\_\_\_ positioning: allows precise positioning using X, Y, Z coordinates- X: the left and right offset; Z: the “stacking,” back and front offset; Y: the top and bottom offset.

Answer 19

Absolute positioning: allows precise positioning using \_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_- \_\_\_\_\_: the “stacking,” back and front offset; \_\_\_\_\_: the top and bottom offset; \_\_\_\_\_: the left and right offset.

Question 20

Z-index property values apply irregardless of the \_\_\_\_\_ in which they are \_\_\_\_\_ in the HTML document.

Answer 20

\_\_\_\_\_ \_\_\_\_\_ \_\_\_\_\_ apply irregardless of the order in which they are listed in the HTML document.