CSS:
  • 1.  Floats & clears #1
  • 2. Floats & clears #2
  • 3. Positioning #1
  • 4. Fullscreen background
  • 5. CSS filters
  • 6. Making a menu
  • 7. CSS 3
  • 8. Responsive webdesign
  • CSS: POSITIONING #1..And we'll call it baby. So let's put it in the corner.

    Let's assume that you understand the normal flow of elements and that you have some experience with div tags, selectors and a doctype. Sometimes you don't want to put that specific element in the normal flow on the left. You need to put that element in the corner at the top or at the bottom. Well, you will need to use positioning. Positioned elements are placed in a certain way and mostly in a certain location. They are exceptions to the normal flow (and normal elements) and are therefore more rare to your pages. You might have a social media menu at the top on the right or you might have a back to top button positioned in the corner on the left. Let's take a look at what types of positioning exists.

    1. Absolute positioning

    The easiest positioning to explain is absolute. Because absolute positions your elements on your page via certain coordinates. You can even decide to work from the left or right and from the top or bottom. But not both. I can't tell an element to go stand on the right and on the left, any more than I can tell you to go stand in the right corner of your room and the left corner. You'll have to decide on just one.

    Let's assume you have made the world's most amazing submenu and that it had to be positioned in the right corner of your page.

    We'll represent our menu via a red box and we'll call it baby. So let's put it in the corner.

    The HTML:

    <div id="baby"></div>

    The CSS:

    #baby{
      position: absolute;
      top: 0px;
      right: 0px;
    }

    Result:

    You'll notice that I only have to state the distance the box is from a certain side. So I'll tell it to be positioned 0 pixels away from the top and 0 pixels from the right side. So now, it's sticking to the top right corner. Pretty easy right ? You'll also notice that for other elements that are or were already in that location, the red box will appear on top of them, as if pasted on top. Absolute positioned elements always appear on top (above) of normal flow elements. This is the default setting, but can easily be overruled later on.

    2. Fixed positioning

    A fixed positioning works exactly the same as the absolute positioning. But it has one major difference. It doesn't move. So, when the user scrolls, it stays at its defined position. This can be handy if you have a menu at the top, that always has to stay at the top, even if the user scrolls down. Or if you have a back to top button that always has to appear in the bottom right corner of your page. As with absolute positioning, you define it's coordinates and that's it.

    #baby{
      position: fixed;
      top: 0px;
      right: 0px;
    }

    Try scrolling in this example. You'll notice that the button stays where it's suppose to be. In the bottom right.

    3. Relative positioning

    Relative positioning works a bit different then the absolute and fixed. You don't have to define any coordinates. It will always starts from its current position and moves the number of pixels you make it move. You can again decide if you want to move it right or left, top or right. It's important to note that if you move your box a lot, it will never influence any other element on the page. So if you move a box to the right and all of a sudden there would be space enough for other boxes to move up or down, they will still not budge. They don't notice the change. Every element you move via the relative positioning doesn't change the flow of your document. It's the easiest way to move elements around without having any negative results towards the rest of your elements (take that, floats!).

    The HTML:

    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>

    The CSS:

    div{
      width: 50px;
      height: 50px;
    }
     
    #box1{
      background-color: red;
      position: relative;
      top: 0px;
      left: 100px;
    }
     
    #box2{
      background-color: blue;
    }
     
    #box3{
      background-color: green;
    }

    So, explained simple: the code dictated that the box has to move a 100 pixels to the right. And 0 to the bottom. The other boxes stay and don't move. Even though there is space to move up.

    Close this warning and continue at own risk

    Stuff might look weird :s

    Your browser is so old, it knew Gandalf before he had a beard.

    Your browser is so old, it used to babysit Yoda.

    Your browser is so old, it went to an antique store and people started to bid on it.

    Your browser is so old, it's birth certificate is in Roman numerals.

    Your browser is so old, you're old and you should feel old.

    Be thoughtfull of your browser, and update today! It's free, fast and easy