Chat app CSS illustration with animation

Community feedback

• 

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  Congratulations on completing the challenge! 🎉

  It is important to correctly understand CSS Position property to render HTML elements as per the requirement. I also faced difficulties with position property in my initial projects. Please note:

  • By default, all HTML elements are static (non-positioned elements).

  • By using top, right, bottom, left we can control the final location of an HTML element.

  • Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.

  • So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

  You may checkout the following👇 where I discuss about css position, z-index, box-model, Media Queries, Mobile-First Workflow etc. in a simple way.

  12 important CSS topics

  CSS Position Property in Hindi

  Hope this helps.

  Once again you have done a wonderful job.🚀The animation looks nice to me...

  Keep at it...💻 Happy hacking!

  Marked as helpful

  1

  ---

  

  Satyapriya Mahato•400

  @SatyapriyaMahatoPosted over 1 year ago

  @itush Thanks, Just checked the video. It was a great help.

  1

  

  Tushar Biswas•4,080

  @itushPosted over 1 year ago

  @SatyapriyaMahato You're welcome!

  I'm glad to hear that you found the video helpful. 🎥🔥

  If you have any more questions or need further assistance, feel free to reach out. Keep up the great work and happy coding! 💻🌟

  0