CSS position can be used to arrange HTML elements relative to its normal flow on the page or relative to the browser viewport. In this video, look at the different options.
- The position property can be used to arrange elements…relative to its normal flow on the page,…or relative to the browser viewport.…There are five different values:…relative, absolute, fixed, static, and inherit.…Position is also used with a combination…of box offset properties: top, right, bottom and left,…to specify the direction, and placement…of the positioned elements.…Static is the default value.…So basically elements are not positioned.…And Inherit refers to inheriting the values…from an ancestor element.…
For Relative, Absolute and Fixed values,…let's try this out in another JSfiddle example,…so we can visually see the differences.…I added some basic styles to the box here.…But what we want to look at,…its the Relative, Absolute and Fixed positioning.…Let's start with Relative.…Elements that are positioned with Relative,…stay in its natural flow.…But you can use offset properties to nudge the elements…from its default position.…Similar to how we used negative margins.…
If I give this a top value of 10 pixels,…
- Reviewing CSS syntax
- Reviewing simple selectors and attribute selectors
- Using pseudo-class selectors and pseudo-element selectors
- Reviewing the CSS box model
- Adding a menu to your project
- Using float, display, and position
- Debugging CSS
- Resetting stylesheets
- Working with background images
- Exploring a mobile-first approach for responsive web design
- Creating flexible and fluid layouts
Skill Level Beginner
Building Responsive Forms with Flexboxwith James Williamson1h 19m Intermediate
1. CSS Selectors
3. Tips and Tools
4. Responsive and Mobile
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.