Positioning

Question 1

How does position: relative affect an element.

Answer 1

Position: relative allows an element to be positioned RELATIVE to its natural location in the flow of the document. It does not remove the element from flow, therefore other elements do not move into its space.

Question 2

Name the default layout for elements in CSS.

Answer 2

“Flow” is the default layout for elements, in which elements are arranged to avoid overlap.

Question 3

What is the primary concern with position: absolute effect on layout.

Answer 3

Position: absolute pulls the element out of flow, and so can obscure other elements due to its position (either natural position or dictated position).

Question 4

Does padding affect position: absolute elements?

Answer 4

No, padding only affects in-flow elements and will not affect position: absolute elements.

Question 5

What is the default position for a position: absolute element?

Answer 5

The default position, the position without any addition top, left, bottom, right settings is its natural flow location

Question 6

What values can be used to set the position of an element using position: in CSS

Answer 6

Position can be set with:
px
%
rem
em

Question 7

Name two reasons to set position: relative on an element.

Answer 7

1) It allows the constraint of certain child-elements.
2) It allows other CSS properties to be used.

Question 8

How is the location of an absolutely positioned element calculated?

Answer 8

The position is calculated in relation to its nearest POSITIONED ancestor. If it does not find one, it is positioned in relation to the “initial containing block”

Question 9

What potential affect does position: absolute have on its wrapper or container?

Answer 9

By taking the absolutely positioned element out of flow, we can have the wrapper or container collapse to zero height.

Question 10

Name the various Position choices in CSS.

Answer 10

“Static” - which is default position.
“Relative”, “Absolute”, “Fixed” and “Sticky”

Question 11

How does position: absolute affect an element?

Answer 11

position: absolute takes the element out of the normal flow, and bases its new position on whatever is constraining it (its container or wrapper)

Question 12

How do we “opt-out” an element from positioned layout.

Answer 12

We set an element’s position to either:
“static” or “initial” to opt-out of positioned layout.

Question 13

Can position: relative be applied to both in-line and block elements

Answer 13

Yes, position: relative will affect both in-line and block elements

Question 14

How does setting position: relative affect other nearby elements.

Answer 14

position: relative does not affect other nearby elements, they continue to act as if the element was in flow (position: static) allowing (or causing) elements to potentially overlap.

Question 15

Give the parameters for using the Centering Trick with position: absolute

Answer 15

The centering trick is “invoked” with:

1) position: absolute;
2) All cardinal positions set to 0px;
3) A defined Width: and Height:
4) Margins: auto

Question 16

If we want to move items around interactively with JavaScript, what might we use in our CSS?

Answer 16

We might use transform: translate to move elements around using CSS.

Question 17

If we set top:0 and bottom: 0 on a fixed or absolutely positioned element, what do we achieve?

Answer 17

We cause the element to stretch from the top to the bottom of the containing element

Question 18

What is another way to think of position: relative?

Answer 18

That position: relative is actually relative to itself (and not to anything else).

Question 19

What subtle things happens when we set an element to position: relative?

Answer 19

It gains the ability to be positioned with a z-axis delcaration.

Question 20

Are static elements able to be positioned with a z-index?

Answer 20

No, static elements cannot have a z-index.

Question 21

Where is a position: fixed element placed in relation to?

Answer 21

A position: fixed element is placed in relation to the viewport.

Question 22

What is a potential concern with position: fixed elements?

Answer 22

That they may overlap other elements during scrolling, potentially making either of the elements inaccessible

Question 23

With a fixed header that links to an anchor on the same page, how might we avoid inaccessibility issues based on the header?

Answer 23

We might add a

scroll-margin-top: size

declaration to avoid having the anchor under the header

Question 24

What is an element’s “snap area”?

Answer 24

snap area is a box that defines where an element will be snapped to

Question 25

How do we use place-items property?

Answer 25

place-items replaces align-items and justify-items (in that order)

place-items: center center;

Question 26

When should we use margin instead of padding?

Answer 26

1. When we want elements to overlap
2. When we need space around elements
3. When we need to center something
4. When we want to push an element around
5. Prevent elements from touching

Question 27

What is a basic rule of thumb as to when to use Margin?

Answer 27

When we want to space an element in relation to other elements on the page.

Question 28

What is a basic rule of thumb as to when to use padding?

Answer 28

When we want to change the appearance of an element

Question 29

When should we padding instead of margin?

Answer 29

1. When we don’t want content touching the sides
2. You need space between a parent and child element
3. You want to increase the size of an element but not the content.

Question 30

How might we use background-position on a background image?

Answer 30

We might use background-position to lock where an image resizes from:

top left, center right, bottom center

Question 31

What does background-repeat: round; do for us?

Answer 31

It rounds up or down a repeating background image so that it does not get cut at container edges but will expand the image

Question 32

What property and value can we use to prevent a background image from being sliced at container edges?

Answer 32

background-repeat: round;

or

background-repeat: space;

Question 33

What is the difference between background-repeat: space and background-repeat: round?

Answer 33

space distributes the image evenly

round scales the images to fit