Web standard layout example tutorial, use positioning to easily solve complex CSS layout_CSS/HTML

I believe that 99% of the friends who come to the classic forum to learn standards are not going to join W3C or become professional researchers. So what is the purpose of everyone coming? It's very simple. In fact, I just want to add one more skill to myself through standard learning, so that when I look for a job, I won't be stumped by "you need to be proficient in web standards". In the following example, xhtml does not What is the semantics? The purpose of this article is just to let everyone better understand the usage of relative and absolute positioning in CSS (there are indeed many newbies asking this question), and how to effectively combine the background to achieve a more complex layout.I hope the seniors can give me some pointers on the shortcomings, thank you!

-------------------------------------------------- ------first step----------------------------------------- --

First, let’s design a demo with a complicated layout (irregular layout):


---------- ----------------------------------------Step 2------ ------------------------------------
Let's write the code