Positioning Flashcards
What’s the difference between padding and margin
Padding specifies the distance between a boxes
content and its border.
Margin specifies the distance between elements (‘the box around an element’)
What is margin collapse?
If a box sits above another box and they both have margins: the larger margin will be used
What’s the difference between display:none and visibility: hidden
display: none hides an element from the page. It’s like the element is not there at all
visibility: hidden hides the element but does not adjust the layout. A blank space will appear where the item would’ve displayed
What is normal flow?
position: static
The default also known as static.
Any block level element starts on a new line
What is relative positioning?
position: relative
This allows you to move the element from where it would sit in static mode.
You can use top, left, right, bottom offsets.
This does not affect surrounding elements.
What is absolute motioning?
position: absolute
Positions the item relative to it’s containing element. They move as user scrolls up and down the page.
You can use top, left, right, bottom offsets.
It’s take out of flow so doesn’t affect surrounding elements
What is fixed positioning?
position: fixed
A special type of absolute positioning. Item is place respective to browser window. The top left corner.
It’s take out of flow so doesn’t affect surrounding elements
What does floating do?
float: left | right | none
It allows you to place an element to the farthest left or right side of the containing element. Element is removed from normal flow. A floated element becomes block level around which other content can flow,
What’s the z-index
z-index: 1
When elements are removed from normal flow, it’s possible for them to overlap. A z-index property allows you to control what appears on top.
Allows control over the stacking contents. The order the boxes are layered.
