Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Fixed Positioning

  • Take a look at a CSS positioning property called fixed positioning
  • You can create some interesting pages using this property
  • Let's look at how to use the fixed property on a page
  • Open fixed.html
  • This file has a panorama image of las vegas sitting on the page as a background image
  • We will position this image using fixed positioning
  • Open the fixed.txt file in the text folder & add it to the CSS rules on the page
  • View the page in the browser, here are the properties added
    	#vegas {
    	 	background-image: url("vegas-panorama.jpg");
    	 	background-position: center center;
    	 	background-repeat: no-repeat;
    	 	bottom: 0;
    	 	height: 200px;
    	 	position: fixed;
    	 	width: 100%;
    	 	z-index: 10;
  • See how that image does not move in the browser
  • Add this property to another image on the page
  • Preview in the browser
  • You can create some interesting pages using this property

Fixed Positioning

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Fixed Positioning Examples 0:11
  • Fixed Positioning with an Image 2:18
    • Current CSS Styles
    • CSS Text File
    • Preview in Browser
    • CSS Properties for Fixed Positioning
    • Preview in Browser
  • Z-Index 9:19
  • Summary 10:17

Transcription: Fixed Positioning

We are now going to take a look at a concept called fixed positioning.0000

It is a CSS positioning concept that can lead to some interesting results; and I have a couple of examples of using this positioning within a web page design to give you some ideas about how it can be used.0004

And then, we are going to go out to a web page and add this property.0020

I am on the CSS Zen Garden website; and this website is designed to give you examples of working with a variety of CSS properties.0025

I have a couple of examples for the fixed positioning property.0038

This particular one is called Under the Sea, and if you scroll down, you can see how there is an image on there that remains still while I scroll the rest of the page content.0044

It gives it an interesting effect in the design.0059

There is another good example on this: it is a movie theater, and basically, it is like you are sitting at the movies; you are surrounded by theater content, and when I go to scroll, the only thing that scrolls is that main screen area of the theater.0063

Those are examples of fixed positioning: what you do is assign that property to content on the page, and it keeps it still; the rest of the content goes ahead and scrolls, like it normally would be default.0082

Let's do that to a web page, and that will give you a chance to work with it.0098

I have fixed.html open here, and it looks like this does need a save, so I'll go ahead and do that; so there is my fixed page.0104

What I did was: I corrected some content; this text was pulling up alongside my images, so I just put my cursor in front of it and hit return, and I just made sure that that was working for all of the images.0116

The idea is: this is a page about Las Vegas.0132

Now, what I want to do is...I have a panorama of Las Vegas that I am going to place at the bottom of the page so that, when they scroll, that panorama view will always remain on the page.0138

I have a file to assist us with doing that.0153

So, let's look at the CSS styles that are being used on the page right now, before we change anything.0158

The styles.css has some styles for (let me open this up a little bit) our text, for our header tags, and for my Paragraph and List Item.0165

There is also a Specials class that I am not using specifically on this page.0181

That is our external style sheet; now, I have also added some rules specific to this page on here, and that is the wrapper; that is what is containing our content (so you see the little yellow dotted line right here).0186

And, if I turn off the color on this page, that little dotted line that is an indication of where the page ends that Dreamweaver puts in--it turns black on white.0203

When your background is black, you can see it turns yellow so we can see it.0216

In the Content area, I have a font family of Tahoma; and in my body tag, that is what is giving my page its black background.0221

So, if I click in front of the background, you can see it turns to white; I'm disabling that background color property.0231

I'll turn that back on; we are going to keep it black.0241

Now, by default, all page content is aligned left; at some point, I would want to center this, but for now, we are going to focus on that fixed property.0245

To simplify the concept, what I have done is: in the Files panel, I have put a text file; and this has the CSS code to customize our background image for the bottom of the page.0257

I'm going to open that; it's within the text folder within your Course Files, and you can obtain those, always, from the Exercise Files tab underneath the video.0273

I'll open up fixed.txt; and you can see, I didn't want you to have to type this out.0285

So, just go ahead and copy that content; what this is, is--we are going to create a new ID called Vegas and add some properties.0292

I'll go over to my fixed page, the HTML page, and I'm going to move into Code View; and on line 14 here, right above the body tag, I'm going to paste that code in.0301

Now, because it was code, I have to paste it into Code View; so that is why I'm in Code View.0315

Place your cursor on line 14, and I'm going to do a paste.0322

We'll take a look at what those various properties are, but let's look at the page before we do that, so you can see what has been added.0327

I'll go ahead and put this in the browser; there is my browser window, and you can see, as I scroll, that Las Vegas panorama stays in place; everything scrolls down underneath it.0336

Because my page is black, it's a little bit difficult to see what is going on; but my panorama is centered within the browser window.0351

So, if I make this browser window narrower, you will see it remains centered; and that is what we are going to want to do for the rest of the page.0360

But now, when I scroll, that panorama is always available.0372

Let's look at the properties that did that; and with doing so, we have access in the CSS Styles panel (I'll double-click this) to all of those properties to easily see them.0377

Let me move this over just a little bit, so we can see those a little bit better; and I'll expand this.0392

There we go: so, what properties did I add to this background image to make it appear?0399

Well, first of all, it's a background image; so I can add text on top of it; it's a background image here.0407

I added a background color so that, once it fills out and the browser window gets wider, there is black on each side.0416

If I didn't have that and I let the browser window get really wide, it is not going to look very nice.0425

So, feel free to go ahead and play with some of these properties.0432

I have the background position for that content centered; and you can see, if I hover over this, it's the horizontal position and also the vertical position.0437

The first background position is for horizontal; the second one is for vertical; and they are both set to center.0449

That is why that image stays centered in my browser window.0457

Now, if I turn off background repeat of no repeat, when I put this in the browser, what happens to background images is: they repeat based on the amount of space.0462

So, I will get this image showing multiple times, as you can see; it just keeps going.0476

Now, if that is the effect I want for this image, that is fine; and it does kind of add to the panorama piece.0482

So, I will leave it up to you whether you like that or not; what happens is: the image fills out the space; if I make this a little bit smaller, you can see, it perfectly aligns that image and sets it up so it's completely filling the space.0490

And one reason it is doing that (I'll turn on the no repeat so we only get one) is: here is my position of fixed; now, what happens if I remove that?0508

I'll disable it, save the page, and put it back in the browser.0520

Let's look at what happens if it is not fixed.0526

You can see, it scrolls just like the rest of the page; so the scrolling behavior is a default behavior in HTML; what the position of fixed does is get rid of that default behavior and says, "Always keep it where it is located."0531

My width is 100% of the browser window, so that is why it fully fills it out: no matter what size my browser window is, it is going to fill it all the way.0547

What the Z-index does is: it is considered your stacking order.0559

What I want to do is make sure that this image stays on top of any content that would scroll.0564

A Z-index--the higher the number, the higher it is in the web page.0571

You can think of this almost like layering in a graphics program, if you are familiar with that, or basically stacking things on top of one another.0577

Let's say you have a stack of books: the lower the number, the lower it is in the stack; and whatever the numbers are, as long as they are higher than the previous ones in the Z-index, it will go on top.0587

I set this Z-index to 10, because the standard page content is set at 1.0602

That will make sure my background image always stays on top when I go to scroll, instead of ending up underneath.0609

That is an example of the fixed positioning piece in CSS; and this page is set up, so feel free to modify and play around with it, using these various properties and enabling and disabling them to give you the strong idea of what fixed positioning is all about.0617

But that is the CSS property called fixed positioning.0639

Thank you for watching; see you in the next lesson!0643