ptg16476052Workshop 31111
When the mouse pointer is over a list item in the navigation lists, I set the display prop-
erty of the list that’s a child of that list item to block. I also change the background color
and color of the link so that it’s highlighted. That’s it for the list. The resul t is a dynamic
menu system implemented with pure CSS.
Summary
In this lesson, I looked at the styles associated with positioning elements on the page.
Using positioning, you can arrange elements in any arbitrary fashion that you like. As
you saw in the final example, you can combine these properties with other styles to create
complex page elements that behave like applications. You also saw that you can position
elements relative to parent elements, as I did when I created the overlays for the image.
Finally, you saw that fixed positioning can position elements based on the viewport. CSS
positioning is what enables web developers to create websites that work like desktop
applications.
Workshop
If you’ve made it this far, I’m sure that you still have a few questions. I’ve included a
few that I think are interesting. Afterward, test your retention by taking the quiz, and then
expand your knowledge by tackling the exercises.
Q&A
Q Is it possible to move absolutely positioned items around the page?
A Yes, you can move positioned elements with JavaScript. The first lesson on
JavaScript is Lesson 17, “Introducing JavaScript.” You can use JavaScript to mod-
ify any styles on a page. There are also libraries that enable you to apply effects
when you show or hide elements, like jQuery UI, which you can find out more
about at http://jqueryui.com/.
Q Where can I find more examples of using CSS for positioning?
A The Mozilla developer site provides a wide variety of examples in the Mozilla
DemoStudio, at https://developer.mozilla.org/en-US/demos/. You can use it to get
an idea of what can be accomplished with CSS.