Putting Positioning to Practice

We learned a great deal about CSS positioning in the last lesson. In this lesson, we will apply some of the new knowledge gained to finsih off the iPhone project.

The code playground below shows the current state of the iPhone project.

Here it is:

You remember how we got here, right?


Positioning the Buttons

No phone has its buttons sitting in the center of the screen. That’s just crazy.

As a refresher, the blue and red dots above are as a result of styling the :before and :after pseudo-element of .phone-inner

Press + to interact
<html>
 <head>
   <title> Teach me positioning </title> 
 </head>
 <body>
   <section class="phone-body">
     <div class="phone-inner">
      <article>
         C S S đŸ€Ż R O C K S
      </article>
    </div>
   </section>
 </body>
</html>

Now we need to position the pseudo-elements, :before and :after to sit in the right places.

So we don’t lose sight of where we are headed, here is the final result ...

Get hands-on with 1400+ tech skills courses.