Throughout the second and fourth week of Wecode, a coding bootcamp, I was given the assignment of cloning the log-in and main page of instagram.
The first week, I only used HTML and CSS to create the structure and add style. Although the task assigned to me had a simpler, older version of Instagram, I tried to make it look as updated as possible.
One of the things I learned that week was the multiple ways of laying out the elements of a webpage. The one that I used most often was the position CSS property.
The position property can take 5 values :
- static
- fixed
- relative
- absolute
- sticky
You can learn more about the functions of these values on MDN's page.
I used both relative and absolute to position child elements anywhere inside the parent elements.
Here is an example :
The input box, which has a background color of gray, was set to position relative. Setting an element to this position means that the element is positioned relative to its normal position. By using the properties top, bottom, right, and left, you can move the element on these directions from its normal position. In the case of my input box, I simply left it in its normal position.
The reason why I left it where it originally was, is because I wanted to set one of its child elements, the search icon, to position absolute. This allowed to me to relocated the icon somewhere inside the input box. And by using top and left, I safely positioned it where I wanted it to be, as you can see on the image above.
You have to be careful using absolute. If an element does not have a positioned ancestor,the element will be positioned relative to the document body.
