Web Development

Lecture Objectives

• learn how to use CSS to float an element
• learn how to use CSS to position an element
• learn when to use positioning (almost never!) from examples of relative, absolute, fixed and sticky positioning

Warning

Fog of details ahead!

Do not 'learn off'.
Look-up when needed.

Out of Flow

• By default, elements are laid out in the order they appear in the HTML.
• There are ways of moving elements so that they appear in a place not based on the order of the HTML.
• Some of these take the element out of flow, so that other elements are not aware that it exists:
  • See absolute and fixed positioning.
• Others leave the element in flow, so that other elements are aware that it exists.
  • See floating and relative positioning.

CSS Floating

• Floating an element:
  • moves an element to the left or right within its parent;
  • makes its outer display type block, if it wasn't already;
  • allows text and other inline content to appear alongside and below it.
• The main use is for images but you can float other elements.
• You may want to set the width of the floated element.
• You may want to give it some margins.

Floating an Image

<section id="seashells">
    <h2>Seashells</h2>
    <p>
        A seashell is a hard, protective outer
        layer created by an animal that lives 
        in the sea. 
        <img src="seashell.jpg" alt="..." />
        The shell is part of the body of the 
        animal. Empty seashells are often found 
        washed up on beaches by beachcombers. 
        The shells are empty because the animal 
        has died and the soft parts have been 
        eaten by another animal or have 
        decomposed.
    </p>
</section>

img {
    float: left;
}

Text is from Wikipedia

CSS Shapes

• CSS shapes allows content to flow around a non-rectangular shape.
• (In the future, it might be possible to have text flow within a shape).
• The element around which the content flows:
  • must be floated left or right and have a width and height;
  • must have the shape-outside property whose values include circle, ellipse, inset (= rectangle) or polygon.

CSS Shapes Example

<section id="seashells">
    <h2>Seashells</h2>
    <div id="shape" role="presentation">
    </div>
    <p>
        A seashell is a hard, protective 
        outer layer created by an animal 
        that lives in the sea. The shell is 
        part of the body of the animal. 
        Empty seashells are often found 
        washed up on beaches by 
        beachcombers. The shells are empty 
        because the animal has died and the 
        soft parts have been eaten by 
        another animal or have decomposed.
    </p>
</section>
        

#shape {
    float: left;
    height: 10em;
    width: 10em;
}
            

#shape {
    float: left;
    height: 10em;
    width: 10em;
    shape-outside: circle();
}

CSS Shapes: Generated Content

The div spoils the HTML.

To avoid this, people use CSS generated-content:

<section id="seashells">
    <h2>Seashells</h2>
    <p>
        A seashell is a hard, protective 
        outer layer created by an animal 
        that lives in the sea. The shell is 
        part of the body of the animal. 
        Empty seashells are often found 
        washed up on beaches by 
        beachcombers. The shells are empty 
        because the animal has died and the 
        soft parts have been eaten by 
        another animal or have decomposed.
    </p>
</section>
        

#seashells::before {
    content: "";
    float: left;
    height: 10em;
    width: 10em;
    shape-outside: circle();
}
        

CSS Shapes: Images

An image is another way to avoid using a div.

<section id="seashells">
    <h2>Seashells</h2>
    <img src="seashell.png" alt="" />
    <p>
        A seashell is a hard, protective 
        outer layer created by an animal 
        that lives in the sea. The shell is 
        part of the body of the animal. 
        Empty seashells are often found 
        washed up on beaches by 
        beachcombers. The shells are empty 
        because the animal has died and the 
        soft parts have been eaten by 
        another animal or have decomposed.
    </p>
</section>
        

#seashells img {
    float: left;
    shape-outside: circle();
}
        

CSS Shapes: Transparent Images

If the image has an alpha channel, then you can even use that to create the shape.

<section id="seashells">
    <h2>Seashells</h2>
    <img src="seashell.png" alt="" />
    <p>
        A seashell is a hard, protective 
        outer layer created by an animal 
        that lives in the sea. The shell is 
        part of the body of the animal. 
        Empty seashells are often found 
        washed up on beaches by 
        beachcombers. The shells are empty 
        because the animal has died and the 
        soft parts have been eaten by 
        another animal or have decomposed.
    </p>
</section>
        

#seashells img {
    float: left;
    shape-outside: url("seashell.png");
}
        

CSS Positioning

CSS positioning allows you to precisely position an element.

However, avoid CSS Positioning! (Mostly.)

CSS Positioning

• The position property specifies how an element will be positioned:
  static, relative, absolute, fixed, sticky.
• The box offset properties
  top, right, bottom, left, z-index
  specify where an element will be positioned relative to something.
  • Values for the offset properties can be in any units such as px, em, %, …
  • (Mostly, if you use both top and bottom, then bottom is ignored; if you set both left and right, then right is ignored.)

Static Positioning

This is the default: normal layout.

The offset properties have no effect: the element remains in its normal position.

Relative Positioning

This is for 'nudging' the element.

The offset properties are how much to move relative to the element's original position, e.g.:

But the element is still in flow, so it leaves a gap behind.

Relative Positioning Example

<p id="container">
    This paragraph contains
    <em id="phrase">an element</em>
    which we will position in various ways.
</p>
        

#phrase {
    position: relative;
    top: 2em;
    left: 3em;
}
        

Absolute Positioning

The element is removed from the flow
(it is out of flow so no gap left behind).

It is positioned relative to a 'containing element':
either its nearest ancestor that is not static, if there is one,
else the viewport (i.e. roughly speaking, the screen/browser window).

The offset properties are now the distance from the edge of the containing element.

Absolute Positioning Example

In this one, the element will be positioned relative to the viewport:

<p id="container">
    This paragraph contains
    <em id="phrase">an element</em>
    which we will position in various ways.
</p>
        

#phrase {
    position: absolute;
    top: 2em;
    left: 3em;
}
        

Absolute Positioning Example

To make absolute positioning work as we want,
we often need to use relative positioning on its parent
but without changing the parent's position!

<p id="container">
    This paragraph contains
    <em id="phrase">an element</em>
    which we will position in various ways.
</p>
        

#container {
    position: relative;
}

#phrase {
    position: absolute;
    top: 2em;
    left: 3em;
}
        

Fixed Positioning

Fixed positioning is like absolute positioning but always relative to the viewport.

<p id="container">
    This paragraph contains
    <em id="phrase">an element</em>
    which we will position in various ways.
</p>
        

#phrase {
    position: fixed;
    top: 2em;
    left: 3em;
}
        

Sticky Positioning

Sticky positioning is sensitive to the user's scroll position.

The element is positioned normally until it gets to a specific distance from the edges of the viewport.
At that point, the element behaves as if it we had used fixed positioning.

<h1>A heading</h1>
        

h1 {
    position: sticky;
    top: 0;
    left: 0;
}
        

Advice on Positioning

Generally, avoid CSS Positioning!

Web developers used to lay out their whole web page using positioning.
Don't do this. There are now better alternatives.

However, there are some fun things we can do with positioning.

Some Uses of Positioning

You could position text over an image.

<figure id="censoredfigure">
    <img src="naked_man.jpg" alt="..." />
    <strong id="censoredmessage">CENSORED</strong>
</figure>
        

#censoredfigure {
    width: fit-content;
    position: relative;
}

#censoredmessage {
    color: red;
    background-color: white;
    border: 2px solid red;
    position: absolute;
    top: 45%;
    left: 25%;
    transform: rotate(-30deg);
}
        

Some Uses of Positioning

Fixed headers and footers: only the main will scroll.

<header>
    …
</header>
<main>
    …
</main>
<footer>
    …
</footer>
        

header {
    position: fixed;
    top: 0;
    left: 0;
}
            
footer {
    position: fixed;
    bottom: 0;
    left: 0;
}
        

G'luck!