freeCodeCamp's Change an Element's Relative Position, Applied Visual Design

Channel:
United States We Will Code
Subscribers:
8,020
Published on ● Video Link: https://www.youtube.com/watch?v=UHUmbQznCMk


Duration: 2:50
53 views
2

In this freeCodeCamp lesson from the Applied Visual Design section we look at the setting the "position" of an element. We learn that all of our html elements are treated like a box by CSS and there are such things as block level elements and inline. Block level elements will always start on a new line while inline elements dont have to start on a new line. Some block level elements are divs and paragraphs while some inline elements are spans or images. We then learn that there is a normal flow that everything follows and the "position" attribute allows us to give it different values. In this lesson we give the position property a value of "relative" and specify a "top" attribute which takes a value of 15px. This will move our element 15px away from the top where the normal flow would be.



Other Videos By We Will Code


2018-09-22freeCodeCamp's Adjust the Hue of a Color, Applied Visual Design
2018-09-21freeCodeCamp's Adjust the Color of Various Elements to Complementary Colors, Applied Visual Design
2018-09-20freeCodeCamp's Learn about Tertiary Colors, Applied Visual Design
2018-09-19freeCodeCamp's Learn about Complementary Colors, Applied Visual Design
2018-09-18freeCodeCamp's Center an Element Horizontally Using the margin Property, Applied Visual Design
2018-09-16freeCodeCamp's Change the Position of Overlapping Elements with the z-index Property
2018-09-15freeCodeCamp's Lock an Element to the Browser Window with Fixed Positioning, Applied Visual Design
2018-09-15freeCodeCamp's Push Elements Left or Right with the float Property, Applied Visual Design
2018-09-15freeCodeCamp's Lock an Element to its Parent with Absolute Positioning, Applied Visual Design
2018-09-14freeCodeCamp's Move a Relatively Positioned Element with CSS Offsets, Applied Visual Design
2018-09-12freeCodeCamp's Change an Element's Relative Position, Applied Visual Design
2018-09-11freeCodeCamp's Adjust the Hover State of an Anchor Tag, Applied Visual Design
2018-09-10freeCodeCamp's Set the line-height of Paragraphs, Applied Visual Design
2018-09-09freeCodeCamp's Set the font-size of paragraph Text, Applied Visual Design
2018-09-09freeCodeCamp's Set the font-weight for Multiple Heading Elements, Applied Visual Design
2018-09-08freeCodeCamp's Applied Visual Design, Set the font-size for Multiple Heading Elements
2018-09-08freeCodeCamp's Use the text-transform Property to Make Text Uppercase, Applied Visual Design,
2018-09-07freeCodeCamp's Applied Visual Design, Decrease the Opacity of an Element
2018-09-07freeCodeCamp's Applied Visual Design, Add a box-shadow to a Card-like Element
2018-09-07freeCodeCamp's Applied Visual Design, Adjust the Size of a Header Versus a Paragraph Tag
2018-09-06freeCodeCamp's Applied Visual Design, Adjust the background-color Property of Text


Tags:
adjust element position
change elements position
css position relative
styling element position