Week 8

Static and Relative POSITIONING

The static and relative position properties stack. Note that static is the default position value of an element, should you fail to apply any other value. If you have three statically positioned elements in your code, they will stack one on top of the next. Look at the example below with three elements, all with a position value of static:

#box_1 {
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 {
position: static;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 {
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}

This is what your HTML page would look like:

<!DOCTYPE html>
<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen” />
</head>
<body>
<!– page content goes here inside the body –>

<div id=”box_1″>
</div>

<div id=”box_2″>
</div>

<div id=”box_3″>
</div>

</body>
</html>

This is what you style.css page would look like:

#box_1 {
position: static;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 {
position: static;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 {
position: static;
width: 200px;
height: 200px;
background: #b7d84b;
}

Above is the static value for a simple, single-column layout where each element must sit on top of the next one. You cannot shift those elements around using offset properties such as top, right, bottom, and left. These properties are unavailable to a static element.

Relative Positioning

Relatively positioned elements behave just like statically positioned elements. In the example below I’ve applied the relative value to the position element:

#box_1 {
position: relative;
width: 200px;
height: 200px;
background: #ee3e64;
}

#box_2 {
position: relative;
width: 200px;
height: 200px;
background: #44accf;
}

#box_3 {
position: relative;
width: 200px;
height: 200px;
background: #b7d84b;
}

Example B proves that relatively positioned elements behave exactly the same way as statically positioned elements. BUT, elements with a relative position value have far greater powers than their static siblings.

–

When positioning relative, you can adjust a relatively positioned element with offset properties: top, right, bottom, and left. Using the markup from my previous example, let’s add an offset position to #box_2:
#box_2 {
position: relative;
left: 200px;
width: 200px;
height: 200px;
background: #44accf;
}

By just adding the property: left: 200px, you see relative positioning in action. The three blocks are still stacked up but now the blue block (#box_2) is pushed out 200 pixels from the left. See what it looks like below:

The blue block is still in the flow of the document—elements are stacking one on top of the other—but notice the green block (#box_3) on the bottom. It’s sitting underneath the blue block, even though the blue block isn’t directly above it. When you use the offset property to shift a relatively positioned element, it doesn’t affect the element(s) that follow. The green box is still positioned as if the blue box were in its non-offset position.

For the next example, we won’t change any CSS, we’ll adjust our HTML to move #box_2 inside of #box_1:

<div id=”box_1″>
<div id=”box_2″></div>
</div>

<div id=”box_3″></div>

Note what I did:

The first example, each div is opened and then it is closed:

<div id=”box_1″>
</div>

<div id=”box_2″>
</div>

<div id=”box_3″>
</div>

In this example, box_1 is opened, box_2 is opened, then you close box_1 and close box_2, and finally you open div box_3 and then you close the div.

Below is what it will look like:

Because of the new coordinate system, the blue block measures its offset 200 pixels from the left of the red block (#box_1) instead of the document. This practice is more common with elements set to position: absolute.

POSITION ABSOLUTE

Now lets take a look at the position:absolute

Unlike the static and relative values, an absolutely positioned element is removed from the normal flow. You can put it anywhere and it won’t affect or be affected by any other element in the flow. Think of it as an element with a giant strip of velcro on its back. Just tell it where to stick and it sticks. Exactly like the relative value, absolutely positioned elements respond to offset properties for positioning. You can set an element to top: 100px and left: 200px; and that element will sit exactly 100px from the top and 200px from the left of the document. Look at an example using four elements:

#box_1 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #ee3e64;
}
#box_2 {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background: #44accf;
}
#box_3 {
position: absolute;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: #b7d84b;
}
#box_4 {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
background: #ebde52;
}

Now you see four boxes, each in a corner of the browser window. Since we set each box’s position value to absolute, we’ve essentially velcroed a box to each corner of our browser window. As you resize the browser, those boxes will stay in their respective corners. If you shrink the browser window so that the boxes overlap, you’ll notice that there is no interaction at all—that’s because they’re out of the document’s normal flow.

The html for the above photo is:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>

</head>
<body>
<!– page content goes here inside the body –>
<div id=”box_1″>
</div>

<div id=”box_2″>
</div>

<div id=”box_3″>
</div>

<div id=”box_4″>
</div>
</body>
</html>

The CSS is

——–

Just like relative elements, absolute elements create a new coordinate system for child elements. Use two or all four offset properties, and you can stretch an element without defining any width or height—it’s bound only by its parent element or the document itself.Look at the following code:
#box_a {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
background: red;
}

#box_b {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background: white;
}

What you get is a WHITE box with a RED border. See below:

Here’s another example where you create a two-column layout that fills the entire height of the document.

Here is the CSS:
#box_1 {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: #ee3e64;
}

#box_2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 80%;
background: #b7d84b;
}

Here is the HTML that goes in between your BODY tag:

<div id=”box_1″>
</div>

<div id=”box_2″>
</div>

This is what you get:

Now try the following CSS code:

#box_1 {

width: 200px;

height: 200px;

background: #ee3e64;

#box_2 {

position: absolute;

left: 100px;

width: 200px;

height: 200px;

background: #44accf;

This is what you get:

Look at the blue block (#box_2). I used only one offset, left: 100px;. This allows the #box_2 element to maintain its top edge and still shift 100 pixels to the left. If I applied a second offset to the top, we would see that our blue block (#box_2) is pulled to the top of the document.

HOMEWORK | WEEK 8

Using the positioning models we learned today, create pages with layouts as close to the following examples as possible. Use only HTML and CSS to create these layouts (no images!)
- Layout 1
- Layout 2
Recreate the examples using the HTML and CSS given in today’s class.
Use the positioning scheme (or a combination) of your choice to layout your resume, artist statement and contact page. Create additional divs or spans, or apply classes and ids, as necessary.
Upload, validate, and browser test all your new HTML and CSS before class next week

Web Design 1

CUNY – York College

Static and Relative POSITIONING

HOMEWORK | WEEK 8

3 thoughts on “Week 8”