Front End Web Development

Spark Boulder, Summer 2017

Session 7: Generations

display and position styles

More Dumb Fun Web Stuff

http://learnlayout.com/

Tonight: display and position styles

The display style has to do with how our element is sized on the page.

The position style has to do with where our element is placed on the page.

The display style

Every element on the page already has a display style declared on it!

The vast majority of them are display: block.

Some of them (like <a>, <span>, and <img> tags) are display: inline.

The <head> tag has display: none, which means that our <meta>, <link> and <title> tags don't get displayed.

To see this, bust open your dev tools, inspect the various elements, and check the "Computed" styles of the elements.

display: block

By default, elements with display: block stretch all the way across to fill the parent container.

divs, headings, paragraphs, and most other elements have display: block by default!

Anchor tags and spans don't have display: block by default.

(If you really want, you can set them to be display: block, but I wouldn't recommend it.)

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    divs have display: block by default.
</div>
<div>
    notice how it stretches all the way across to fill the container?
</div>
<div class="fiftyPercent">
    <div>
        even if it's nested.
    </div>
</div>
<h1>headings have display: block by default,</h1>
<p>
    as well as paragraphs.
</p>
<a href="#">links and spans aren't display: block by default!</a>
<span>they don't stretch to fill the container automatically.</span>
/* style.css */

div, h1, p, a, span {
    background-color: lightgray;
    margin: 10px;
}
.fiftyPercent {
    width: 50%;
}

display: block stacks vertically, regardless of element width

Even if I have a bunch of small elements with display: block, they'll stack in a column instead of a row.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    Even if my block-level elements are small
</div>
<div>
    And could easily stack in a row
</div>
<div>
    display: block will make them stack in a column
</div>
<div>
    regardless of width
</div>
/* style.css */

div {
    background-color: lightgray;
    width: 25%;
    margin: 10px;
}

display: inline

What does an element with display: inline look like?

display: inline elements are commonly used inside other elements where it's important to not disrupt the flow of the content. They can also wrap over multiple lines!

<a>, <span>, <strong>, <em> and <img> tags are display: inline by default.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<p>
    Daftendirekt. Discovery doin' it right, oh yeah robot rock high life. Beyond burnin' get lucky. Discovery voyager voyager revolution 909. Funk. <a href="#">Inline elements are commonly found within other elements where it's important not to break the flow of the parent element.</a> Oh yeah, rollin' and scratchin' revolution 909 nightvision veridis quo. Within discovery. <span>They can also wrap over multiple lines!</span> Crescendolls fragments of time, technologic revolution 909 steam machine. Giorgio by moroder instant crush, touch touch. Veridis quo.
</p>
/* style.css */

a, span {
    background-color: lightgray;
}

Inline element stacking

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<span>If you have a bunch of inline elements, </span><span>they'll always stack in a row, </span><span>and can wrap down to the next line mid-element.</span>
/* style.css */

span {
    background-color: lightgray;
}

Inline element weirdness

Generally, you cannot set the dimensions of an element with display: inline.

However, even though <img> elements are inline by default, you can set the dimensions of those without issue.

Things get pretty weird when you try to throw margin or padding on an element with display: inline.

display: inline-block

Elements with display: inline-block tend to combine the best of both worlds. Like a block element, they can be resized, and like an inline element, they normally stack in a row.

However, you might need to add vertical-align: top to ensure that they line up correctly. I just learned that today!

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    Like a block element (and unlike inline elements), inline-block elements can be resized
</div>
<div>
    And like inline elements (and unlike block elements), inline-block elements stack in rows!
</div>
<div>
    But, they must have display: inline-block set explicitly on them.
</div>
<div>
    They also wrap automatically!
</div>
/* style.css */

div {
    display: inline-block;
    vertical-align: top;
    /* hey, I learned something today! Apparently you need vertical-align: top to make sure that they all sit evenly in a row. Algebraic!! */
    height: 200px;
    width: 200px;
    background-color: lightgray;
    margin: 10px;
}

http://learnlayout.com/inline-block-layout.html

display: none

display: none pretty much does exactly what you'd expect it to.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    This element isn't displayed on the page, but you can still see it in the page HTML! Check your dev tools.
</div>
<div>
    It's not invisible, and there's no space for it on the page - it's just not there!
</div>
<div>
    SpoooOooOooOOOooky!
</div>

<span>did somebody say something?</span>
/* style.css */

div {
    display: none;
}

display: flex

We already talked about flexbox a bit!

display: flex is a bit weird because it applies to the contents of the element, instead of how the element is sized.

In general, elements with display: flex can be sized and flow the same way as elements with display: block.

We'll cover flexbox in even more detail next session. In the meantime, if you want to learn more, check out the CSS Tricks documentation or play some Flexbox Froggy.

The position style

The position style tells the browser where to place our elements on the page. It's used for slightly different purposes than display.

By default, every element has position: static. It's not actually shown anywhere in dev tools by default ¯\_(ツ)_/¯

position: fixed

The one that's going to make the most sense right away is position: fixed.

If you want a navbar that scrolls with the page, this is the way to do it!

However, don't forget to adjust the dimensions after you set position: fixed. display: block elements won't stretch all the way across the screen any more.

Don't forget to add some padding on the stuff underneath your fixed element, if you want it to look good in certain positions!

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="navbar">
    this is my navbar! yay!
</div>

<p>
    Fresh da funk technologic lose yourself to dance. Face to face short circuit, face to face. Nightvision digital love indo silver club, around the world, within contact. Alive. Homework steam machine revolution 909 within phœnix. Voyager veridis quo. Alive
    teachers phœnix. Too long, emotion touch lose yourself to dance something about us. Human after all superheroes. Steam machine. One more time robot rock, make love daftendirekt voyager, superheroes motherboard something about us high life too long
    harder, better, faster, stronger, digital love, homework television rules the nation homework the brainwasher steam machine human after all, harder, better, faster, stronger, doin' it right. Phœnix fresh, giorgio by moroder. Emotion. Crescendolls,
    high fidelity contact, technologic revolution 909, crescendolls robot rock, giorgio by moroder. Doin' it right human after all veridis quo fragments of time. Television rules the nation. Fresh steam machine. Fresh. Superheroes. Make love something
    about us human after all, human after all. Within, on/off, face to face. Oh yeah steam machine, random access memories something about us the game of love face to face harder, better, faster, stronger. Technologic, burnin'. Da funk homework. Oh yeah
    harder, better, faster, stronger, phœnix make love. Superheroes human after all touch give life back to music. Human after all. Human after all steam machine face to face burnin'. High life beyond, giorgio by moroder too long, one more time, short
    circuit. The prime time of your life lose yourself to dance, voyager touch teachers within, funk. Human after all alive, alive. High fidelity. WDPK 83.7 FM.
</p>
/* style.css */

.navbar {
    position: fixed;
    width: 100%;
    background-color: lightgray
}

p {
    padding-top: 30px;
}

^ this might be a great situation to use em units?

The top, right, bottom, left styles

The top style sets the top edge of your element to a certain distance from the top of the browser's viewport.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="navbar">
    this element is 100px from the top of the browser viewport.
</div>

<p>
    Fresh da funk technologic lose yourself to dance. Face to face short circuit, face to face. Nightvision digital love indo silver club, around the world, within contact. Alive. Homework steam machine revolution 909 within phœnix. Voyager veridis quo. Alive
    teachers phœnix. Too long, emotion touch lose yourself to dance something about us. Human after all superheroes. Steam machine. One more time robot rock, make love daftendirekt voyager, superheroes motherboard something about us high life too long
    harder, better, faster, stronger, digital love, homework television rules the nation homework the brainwasher steam machine human after all, harder, better, faster, stronger, doin' it right. Phœnix fresh, giorgio by moroder. Emotion. Crescendolls,
    high fidelity contact, technologic revolution 909, crescendolls robot rock, giorgio by moroder. Doin' it right human after all veridis quo fragments of time. Television rules the nation. Fresh steam machine. Fresh. Superheroes. Make love something
    about us human after all, human after all. Within, on/off, face to face. Oh yeah steam machine, random access memories something about us the game of love face to face harder, better, faster, stronger. Technologic, burnin'. Da funk homework. Oh yeah
    harder, better, faster, stronger, phœnix make love. Superheroes human after all touch give life back to music. Human after all. Human after all steam machine face to face burnin'. High life beyond, giorgio by moroder too long, one more time, short
    circuit. The prime time of your life lose yourself to dance, voyager touch teachers within, funk. Human after all alive, alive. High fidelity. WDPK 83.7 FM.
</p>
/* style.css */

.navbar {
    position: fixed;
    top: 100px;
    height: 200px;
    width: 200px;
    background-color: chartreuse;
}

You can do a similar thing with right, bottom, and left.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="navbar">
    this element is 100px from a side of the browser viewport.
</div>

<p>
    Fresh da funk technologic lose yourself to dance. Face to face short circuit, face to face. Nightvision digital love indo silver club, around the world, within contact. Alive. Homework steam machine revolution 909 within phœnix. Voyager veridis quo. Alive
    teachers phœnix. Too long, emotion touch lose yourself to dance something about us. Human after all superheroes. Steam machine. One more time robot rock, make love daftendirekt voyager, superheroes motherboard something about us high life too long
    harder, better, faster, stronger, digital love, homework television rules the nation homework the brainwasher steam machine human after all, harder, better, faster, stronger, doin' it right. Phœnix fresh, giorgio by moroder. Emotion. Crescendolls,
    high fidelity contact, technologic revolution 909, crescendolls robot rock, giorgio by moroder. Doin' it right human after all veridis quo fragments of time. Television rules the nation. Fresh steam machine. Fresh. Superheroes. Make love something
    about us human after all, human after all. Within, on/off, face to face. Oh yeah steam machine, random access memories something about us the game of love face to face harder, better, faster, stronger. Technologic, burnin'. Da funk homework. Oh yeah
    harder, better, faster, stronger, phœnix make love. Superheroes human after all touch give life back to music. Human after all. Human after all steam machine face to face burnin'. High life beyond, giorgio by moroder too long, one more time, short
    circuit. The prime time of your life lose yourself to dance, voyager touch teachers within, funk. Human after all alive, alive. High fidelity. WDPK 83.7 FM.
</p>
/* style.css */

.navbar {
    position: fixed;
    /* try uncommenting one of these at a time */
    /*top: 100px;*/
    right: 100px;
    /*bottom: 100px;*/
    /*left: 100px;*/
    height: 200px;
    width: 200px;
    background-color: chartreuse;
}

Setting multiple top/right/bottom/left styles on an element

On positioned elements where you specify a height/width, top and left will override bottom and right.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="navbar">
    even though this element has top, right, bottom, and left set, only top and left are respected.
</div>

<p>
    Fresh da funk technologic lose yourself to dance. Face to face short circuit, face to face. Nightvision digital love indo silver club, around the world, within contact. Alive. Homework steam machine revolution 909 within phœnix. Voyager veridis quo. Alive
    teachers phœnix. Too long, emotion touch lose yourself to dance something about us. Human after all superheroes. Steam machine. One more time robot rock, make love daftendirekt voyager, superheroes motherboard something about us high life too long
    harder, better, faster, stronger, digital love, homework television rules the nation homework the brainwasher steam machine human after all, harder, better, faster, stronger, doin' it right. Phœnix fresh, giorgio by moroder. Emotion. Crescendolls,
    high fidelity contact, technologic revolution 909, crescendolls robot rock, giorgio by moroder. Doin' it right human after all veridis quo fragments of time. Television rules the nation. Fresh steam machine. Fresh. Superheroes. Make love something
    about us human after all, human after all. Within, on/off, face to face. Oh yeah steam machine, random access memories something about us the game of love face to face harder, better, faster, stronger. Technologic, burnin'. Da funk homework. Oh yeah
    harder, better, faster, stronger, phœnix make love. Superheroes human after all touch give life back to music. Human after all. Human after all steam machine face to face burnin'. High life beyond, giorgio by moroder too long, one more time, short
    circuit. The prime time of your life lose yourself to dance, voyager touch teachers within, funk. Human after all alive, alive. High fidelity. WDPK 83.7 FM.
</p>
/* style.css */

.navbar {
    position: fixed;
    top: 100px;
    right: 100px;
    bottom: 100px;
    left: 100px;
    height: 200px;
    width: 200px;
    background-color: chartreuse;
}

However, if you've got an element without any height/width styles, then setting top/right/bottom/left will stretch the element.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="navbar">
    this element has no height or width, so top, right, bottom, and left stretch the element to the appropriate dimensions.
</div>

<p>
    Fresh da funk technologic lose yourself to dance. Face to face short circuit, face to face. Nightvision digital love indo silver club, around the world, within contact. Alive. Homework steam machine revolution 909 within phœnix. Voyager veridis quo. Alive
    teachers phœnix. Too long, emotion touch lose yourself to dance something about us. Human after all superheroes. Steam machine. One more time robot rock, make love daftendirekt voyager, superheroes motherboard something about us high life too long
    harder, better, faster, stronger, digital love, homework television rules the nation homework the brainwasher steam machine human after all, harder, better, faster, stronger, doin' it right. Phœnix fresh, giorgio by moroder. Emotion. Crescendolls,
    high fidelity contact, technologic revolution 909, crescendolls robot rock, giorgio by moroder. Doin' it right human after all veridis quo fragments of time. Television rules the nation. Fresh steam machine. Fresh. Superheroes. Make love something
    about us human after all, human after all. Within, on/off, face to face. Oh yeah steam machine, random access memories something about us the game of love face to face harder, better, faster, stronger. Technologic, burnin'. Da funk homework. Oh yeah
    harder, better, faster, stronger, phœnix make love. Superheroes human after all touch give life back to music. Human after all. Human after all steam machine face to face burnin'. High life beyond, giorgio by moroder too long, one more time, short
    circuit. The prime time of your life lose yourself to dance, voyager touch teachers within, funk. Human after all alive, alive. High fidelity. WDPK 83.7 FM.
</p>
/* style.css */

.navbar {
    position: fixed;
    top: 100px;
    right: 100px;
    bottom: 100px;
    left: 100px;
    background-color: chartreuse;
}

position: relative

position: relative basically "shifts" an element by a certain amount.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    this is a normal, statically positioned element.
</div>
<div class="relativeDiv">
    this div is positioned 20px down and 20px to the right
</div>
<div>
    this is a normal, statically positioned element.
</div>
/* style.css */

div {
    height: 100px;
    width: 100px;
    margin: 10px;
    background-color: chartreuse;
    border: 1px solid black;
}

.relativeDiv {
    position: relative;
    top: 20px;
    left: 20px;
}

Notice that setting top and left shifts the div down and right. Remember, you're setting the top edge of the element to a certain distance inside the normal position!

You can also use negative values to "reverse shift" elements!

position: absolute

position: absolute elements are positioned sort of like position: fixed elements, but the element doesn't stay affixed to the browser viewport.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    this element is absolutely positioned 20px from the bottom right of the page.
</div>

<p>
    On/off, voyager oh yeah give life back to music high life digital love one more time. Teachers, within, too long, on/off, make love homework, crescendolls, within. Too long aerodynamic, within nightvision. Emotion. Doin' it right one more time, revolution
    909. The prime time of your life, revolution 909 steam machine. Harder, better, faster, stronger within. Random access memories, random access memories. Make love, giorgio by moroder, teachers, alive. Indo silver club instant crush, the game of love.
    WDPK 83.7 FM. One more time crescendolls funk fragments of time, veridis quo, technologic, veridis quo. Lose yourself to dance. Burnin' high fidelity. WDPK 83.7 FM motherboard emotion the prime time of your life, make love revolution 909 digital love,
    giorgio by moroder. Television rules the nation. Superheroes, steam machine. Giorgio by moroder. Nightvision, giorgio by moroder doin' it right make love motherboard. Phœnix. Fragments of time lose yourself to dance, WDPK 83.7 FM. Something about
    us. Discovery, superheroes rollin' and scratchin' voyager. Rock'n roll face to face, human after all lose yourself to dance. Lose yourself to dance, crescendolls, get lucky, too long. High life on/off, burnin'. Indo silver club, emotion something
    about us. Homework. Give life back to music the brainwasher high life. Homework lose yourself to dance discovery steam machine steam machine, robot rock. Emotion fragments of time. Steam machine. Teachers, oh yeah. Funk, aerodynamic. On/off. Daftendirekt
    giorgio by moroder instant crush, discovery. Get lucky harder, better, faster, stronger, technologic. Homework lose yourself to dance, short circuit within daftendirekt alive, alive. Superheroes.
</p>
/* style.css */

div {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 150px;
    width: 150px;
    background-color: chartreuse;
}

This might not be the behavior that you want. Ideally, I might want that element to be 20px from the bottom right of the content of the page.

"positioned" elements

There's this wonderful (read: complicated) concept known as "positioned" elements.

In essence, a "positioned" element has a position of fixed, relative, or absolute. (Not static, which is what all elements are by default.)

position: absolute behaves in kind of a funky way - it will find the nearest positioned ancestor (looks at the parent to see if it's fixed/relative/absolute, if not, looks at that element's parent to see if it's fixed/relative/absolute, etc) and set its own position relative to that.

If it can't find one, it'll just set relative to the viewport, just like position: fixed.

Easy fix? Yeah. If you want to set its position absolutely within an element, just make the parent element position: relative and don't change anything else on it.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div>
    this element is absolutely positioned 20px from the bottom right of the the parent element.
</div>

<p>
    On/off, voyager oh yeah give life back to music high life digital love one more time. Teachers, within, too long, on/off, make love homework, crescendolls, within. Too long aerodynamic, within nightvision. Emotion. Doin' it right one more time, revolution
    909. The prime time of your life, revolution 909 steam machine. Harder, better, faster, stronger within. Random access memories, random access memories. Make love, giorgio by moroder, teachers, alive. Indo silver club instant crush, the game of love.
    WDPK 83.7 FM. One more time crescendolls funk fragments of time, veridis quo, technologic, veridis quo. Lose yourself to dance. Burnin' high fidelity. WDPK 83.7 FM motherboard emotion the prime time of your life, make love revolution 909 digital love,
    giorgio by moroder. Television rules the nation. Superheroes, steam machine. Giorgio by moroder. Nightvision, giorgio by moroder doin' it right make love motherboard. Phœnix. Fragments of time lose yourself to dance, WDPK 83.7 FM. Something about
    us. Discovery, superheroes rollin' and scratchin' voyager. Rock'n roll face to face, human after all lose yourself to dance. Lose yourself to dance, crescendolls, get lucky, too long. High life on/off, burnin'. Indo silver club, emotion something
    about us. Homework. Give life back to music the brainwasher high life. Homework lose yourself to dance discovery steam machine steam machine, robot rock. Emotion fragments of time. Steam machine. Teachers, oh yeah. Funk, aerodynamic. On/off. Daftendirekt
    giorgio by moroder instant crush, discovery. Get lucky harder, better, faster, stronger, technologic. Homework lose yourself to dance, short circuit within daftendirekt alive, alive. Superheroes.
</p>
/* style.css */

body {
    position: relative;
}

div {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 150px;
    width: 150px;
    background-color: chartreuse;
}

differences between position: relative and position: absolute

There's one fundamental difference between relative and absolute.

When you set an element with position: absolute, there's no whitespace for the element. It's as if the element doesn't exist within the normal, main flow of the page.

When you set an element with position: relative, there's still whitespace for the element. If you don't set any positioning styles, the element will still be in the same place as normal, and other content will flow with it normally. If you move the element around a lot, then there will still be whitespace where the element used to be.

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="one">
    this is the first element. it doesn't have any position styles.
</div>
<div class="two">
    this is the second element. it's absolutely positioned, so there's no whitespace for it in the layout of the page.
</div>
<div class="three">
    this is the third element. it's relatively positioned, but doesn't have any positioning styles (top, right, bottom, left) on it, so it doesn't appear to be out of place.
</div>
<div class="four">
    this is the fourth element. it's relatively positioned way out of place, but the whitespace still appears for it in the main flow of the page.
</div>
<div class="five">
    this is the fifth element. its name is leeloo. it's relatively positioned slightly out of place, and the whitespace for it still appears behind it.
</div>
<div class="six">
    this is the first element. it doesn't have any position styles.
</div>
/* style.css */

div {
    height: 150px;
    width: 150px;
    margin: 10px;
    background-color: chartreuse;
    border: 1px solid black;
}
.two {
    position: absolute;
    top: 10px;
    right: 10px;
}
.three, .four, .five {
    position: relative;
}

.four {
    top: 500px;
    left: 500px;
}

.five {
    top: 10px;
    left: 10px;
}

The z-index style

Finally! Almost done!

If you've got some overlapping positioned elements, consider using z-index to determine which elements are on top of the page.

Elements with higher z-index values will go on top of elements with lower z-index values.

Try messing around with some of the z-index values in this example:

<!-- index.html -->

<link rel="stylesheet" href="style.css">

<div class="bottom one">
    bottom
</div>
<div class="middle two">
    middle
</div>
<div class="top three">
    top
</div>
/* style.css */

div {
    position: absolute;
    height: 150px;
    width: 150px;
    background-color: chartreuse;
    border: 1px solid black;
}
.one {
    left: 0px;
}
.two {
    left: 50px;
}
.three {
    left: 100px;
}
.bottom {
    z-index: -1;
}
.middle {
    z-index: 10;
}
.top {
    z-index: 1000;
}

Go forth and conquer!

Work on your portfolio page, or your client project!

Add a navbar that sticks to the top of the page when you scroll!

Maybe a photo collage, with a couple of the images overlapping each other?

Whatever you want!

What questions are there?

Stuff for tonight:

How to be a Web Developer

Excelsior! 🚀