Positioning Flashcards
How does position: relative affect an element.
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.
Name the default layout for elements in CSS.
“Flow” is the default layout for elements, in which elements are arranged to avoid overlap.
What is the primary concern with position: absolute effect on layout.
Position: absolute pulls the element out of flow, and so can obscure other elements due to its position (either natural position or dictated position).
Does padding affect position: absolute elements?
No, padding only affects in-flow elements and will not affect position: absolute elements.
What is the default position for a position: absolute element?
The default position, the position without any addition top, left, bottom, right settings is its natural flow location
What values can be used to set the position of an element using position: in CSS
Position can be set with:
px
%
rem
em
Name two reasons to set position: relative on an element.
1) It allows the constraint of certain child-elements.
2) It allows other CSS properties to be used.
How is the location of an absolutely positioned element calculated?
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”
What potential affect does position: absolute have on its wrapper or container?
By taking the absolutely positioned element out of flow, we can have the wrapper or container collapse to zero height.
Name the various Position choices in CSS.
“Static” - which is default position.
“Relative”, “Absolute”, “Fixed” and “Sticky”
How does position: absolute affect an element?
position: absolute takes the element out of the normal flow, and bases its new position on whatever is constraining it (its container or wrapper)
How do we “opt-out” an element from positioned layout.
We set an element’s position to either:
“static” or “initial” to opt-out of positioned layout.
Can position: relative be applied to both in-line and block elements
Yes, position: relative will affect both in-line and block elements
How does setting position: relative affect other nearby elements.
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.
Give the parameters for using the Centering Trick with position: absolute
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
If we want to move items around interactively with JavaScript, what might we use in our CSS?
We might use transform: translate to move elements around using CSS.
If we set top:0 and bottom: 0 on a fixed or absolutely positioned element, what do we achieve?
We cause the element to stretch from the top to the bottom of the containing element
What is another way to think of position: relative?
That position: relative is actually relative to itself (and not to anything else).
What subtle things happens when we set an element to position: relative?
It gains the ability to be positioned with a z-axis delcaration.
Are static elements able to be positioned with a z-index?
No, static elements cannot have a z-index.
Where is a position: fixed element placed in relation to?
A position: fixed element is placed in relation to the viewport.
What is a potential concern with position: fixed elements?
That they may overlap other elements during scrolling, potentially making either of the elements inaccessible
With a fixed header that links to an anchor on the same page, how might we avoid inaccessibility issues based on the header?
We might add a
scroll-margin-top: size
declaration to avoid having the anchor under the header
What is an element’s “snap area”?
snap area is a box that defines where an element will be snapped to
How do we use place-items property?
place-items replaces align-items and justify-items (in that order)
place-items: center center;
When should we use margin instead of padding?
- When we want elements to overlap
- When we need space around elements
- When we need to center something
- When we want to push an element around
- Prevent elements from touching
What is a basic rule of thumb as to when to use Margin?
When we want to space an element in relation to other elements on the page.
What is a basic rule of thumb as to when to use padding?
When we want to change the appearance of an element
When should we padding instead of margin?
- When we don’t want content touching the sides
- You need space between a parent and child element
- You want to increase the size of an element but not the content.
How might we use background-position on a background image?
We might use background-position to lock where an image resizes from:
top left, center right, bottom center
What does background-repeat: round; do for us?
It rounds up or down a repeating background image so that it does not get cut at container edges but will expand the image
What property and value can we use to prevent a background image from being sliced at container edges?
background-repeat: round;
or
background-repeat: space;
What is the difference between background-repeat: space and background-repeat: round?
space distributes the image evenly
round scales the images to fit
