Today we’ll continue learning CSS, but we’ll focus on more advanced topics like layout & positioning, media queries, and transitions & animations.
Layout & Positioning
Using CSS to make a webpage layout is not intuitive. Also, there are multiple ways to achieve the same end result. This is all to say that learning layout and positioning requires practice through trial and error. Be patient, open up your Chrome inspector, and have fun!
These are the CSS properties you’ll likely use:
Position
The position property can help you manipulate the location of an element.
position: static — default
position: relative
position: absolute
position: fixed
position: sticky(deprecated)
Remember that when you use anything other than position: static, you’ll need to then include specific declarations that specify where your element should be. For example, you might want to use some of these:
top: 5px
right: 0
bottom: 20px
left: 12px
When you position something absolute or fixed, know that you’re removing that element from the normal flow of the web page. It’s good to keep in mind, especially as you start to think about websites that can easily adapt to smaller or larger screens(“responsive design”).
You might also need to use the property z-index when positioning things absolute or fixed. Z-index accepts integers and lets you layer things below or on top of each other.
As we’ve said before, every element on a webpage is a rectangular box.(Try Matt’s bookmarklet“Boxify” to see.) The display property determines exactly how that rectangular box behaves.
display: block — default(depending on element)
display: inline — default(depending on element)
An inline element has no line break before or after it, and it tolerates HTML elements next to it. It cannot have a width and height set.
A block element has some whitespace above and below it and does not tolerate any HTML elements next to it. The element forces a line break after it.
An inline-block element is placed as an inline element(on the same line as adjacent content), but it behaves as a block element. It can accept width and height, while also allowing other elements to sit left and right of it.
Also, when you position things with inline-block, you might also want to use the property vertical-align as well. If your inline-block things are various heights, with vertical-align you can align them in different ways.
The idea of“floats” comes from print layouts, where text wraps around an image on either left or right. On the web in CSS, the property float specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still allowing other elements to wrap around it.
Layout & Positioning
Position
Display
Float