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.
position property can take 5 values :
You can learn more about the functions of these values on MDN's page.
I used both
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
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
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.