<

[Webinar] Streamline your web hosting managementRegister Today

x

CSS Positioning - Relative vs Absolute vs Fixed

Posted on
6,218 Points
218 Views
Last Modified:
Experience Level: Beginner
5:09
In this tutorial viewers will learn how to position items using CSS's three positioning types

Video Steps

1. Create a new HTML document with an internal stylesheet.

2. Create another div in CSS and name it Absolute

3. Type "position:absolute;" and "top:10px; left:50px;". Define its background-color as blue. Define its dimensions as 500 by 500px.

4. Create a div in CSS and name it Relative

5. Type "position:relative;" and "top:10px; left -30px;". Define its background-color as red. Define its dimensions as 300 by 300px. Relatively positioned elements are positioned relative to its normal position; that is, if it would ordinarily be at position left:50px because of its container div, typing left:-20px would send it back to the 30px position.

6. Create another div in CSS and name it Fixed

7. Type "position:fixed;" and "top:10px; left:10px;". Define its background-color as yellow. Define its dimensions as 50 by 50px. Create another div for a Container and define its height as 1000px. Fixed elements do not move, even when the page is scrolled.

8. In HTML, type the tags for all of the divs. Place the Relative div inside the Absolute div. Place all the divs inside the Container div. Refresh the page to see the effects.

0
Comment
0 Comments

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Join & Write a Comment

Suggested Videos

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month