CSS Positioning Examples and Other CSS Tidbits

  • Click here for Fixed Title example. Note that when you scroll down, the title is fixed to the top of the browser window. Because the title div is on top of the content div, you must add enough padding to the top of your content (or else your first sentences will be hidden by the title). If you cannot see your title, check to be sure that the z-index of your title is greater than the z-index of your content.
  • Click here for Fixed Title and Fixed Footer example. Note that neither the title nor the footer move when the content scrolls. Because the footer is on top of the content, add enough padding to the bottom of the content (or else your last content sentences will be hidden by the footer).
  • Click here for Fixed Title, Footer, and Left/Right Borders. We just added a left and right margin to the content and allowed the body background color (same as title and footer) to show through.
  • Click here for Fixed Title on Top of Fixed Left and Fixed Right Images. Narrow the browser to see the cool effect.
  • Click here for an example of using absolute positioning within a relative positioned element. Similar to the above example, except that the whole layout (title, nav, content, footer) scrolls up and down and are not fixed to the edge of the browser window. Narrow the browser to see the effect of the title moving over the images. Scroll up and down to see that the elements are not fixed to the edge of the browser window.
  • Click here for an example of how you can make drop down menus with centered tabs. Instead of making the tabs inline, you can use a table to get the centering and vertical (top) alignment you need for the dropdown. absolute positioning.
  • Click here to learn about CSS transitions. This example shows a two second transition that makes the div wider whenever the user hovers over the div. The original transition is shown in green below. Just to be sure you understand CSS transitions, add a two second transition such that the red div not only gets wider, but also turns blue when you hover over it. The correct answer for this is bolded below.
    • div {
          width: 100px;
          height: 100px;
          background-color: red;
          transition: width 2s;
          transition: background-color 2s;
      }

      div:hover {
          width: 300px;
          background-color: blue;
      }
  • Click here to see an example of using "background-attachment:fixed" in your body. It is an easy but cool effect whereby your background image does not scroll even when the page scrolls. As you can see when you view source, it's just background-attachment:fixed in the body rule.