Scribd
Upload
17 views16 pages

WT - Lab 7

Uploaded by

Mishal Mansoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views16 pages

WT - Lab 7

Uploaded by

Mishal Mansoor
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

LAB 7 Positioning elements using CSS

Objectives

Theoretical Description
Positioning Elements Using CSS

1. Position Static
By default all elements on the web page are using position:static without even needed to specify it.
This is the normal positioning method which is what is used in the normal document flow. Chances
are, you’ll never need to specify position:static.

2 Position Relative
If you assign position:relative to an element, what that does is allow you to offset the box
precisely to the top, right, bottom, or left by a given amount relative to its original position in the
document flow. The space that element would have occupied is preserved and continues to have an
effect on the layout of surrounding content.To demonstrate the position Relative technique, we will
use the following markup. We remove the floats from our <section> elements so they now stack
on top of each other. We also assign a width to the wrapping div, and set the margin to auto so that
our <section> elements line up right in the center of the page.
html

<html>

<head>
<title>CSS Positioning Tutorial</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="container">

<section class="one">

<img src="berries.png" width="200">

Lorem ipsum dolor sit...

</section>

<section class="two">

<img src="forest.png" width="200">

Lorem ipsum dolor sit...

</section>

<section class="three">

<img src="fish.png" width="200">

Lorem ipsum dolor sit...

</section>

</div>

</body>

</html>

Markup
Copy
css

section {
border: 2px solid lightblue;

padding: 10px;

margin: 3px;

img {

float: left;

padding-right: 10px;

.container {

width: 500px;

margin: auto;

CSS
Copy
What we want to do now is apply a position:relative to the second <section> so that
we can move it relative to where it would normally appear in the document flow.
This following CSS says to offset that <section> 100 pixels from the left of where it
would have normally appeared. This gives the effect of shifting the <section> 100
pixels to the right.
section.two {

position: relative;
left: 100px;

CSS

You can also move it to the left by offsetting from the right.

section.two {

position: relative;

right: 100px;

CSS
If we were to set either the top or bottom offset, the content would begin to overlap
but you get the idea of how this works. It is important to note that when you use
position:relative on an element, it is not removed from normal document flow. The
element still occupies the original position in the document, it is just offset visually to
the end-user. Position relative is very good if you want to simply tweak an element
just a bit in the overall layout.
Consider the three sections are now back to a float layout where we have three
columns. We could use this CSS to create a neat offset effect vertically now.
section.two {

position: relative;

top: 40px;

section.three {

position: relative;

top: 80px;

CSS
The key points to remember about Relative Positioning are:

● The element remains in the normal document flow


● The original space in the document is preserved
● Be careful for overlapping content as you move the element

2. Position Absolute
The position:absolute value takes elements out of the normal document flow. This
means the element can be placed absolutely anywhere on the web page that the
designer chooses. Absolute positioning is likely the most commonly used and
versatile of the various positioning methods. Absolutely positioned elements will
continue to scroll with the page. The position:absolute value is most often used on
an element which has a parent that has its positioning set to position:relative. It’s a
little confusing, so let’s see an example.
We will start with just a <div> element which has an <img> and then an <h1>
element like so.
html

<html>

<head>

<title>CSS Positioning Tutorial</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="container">

<div id="banner">

<img src="friends.png" width="100%">

<h1>Hanging Out With Friends</h1>

</div>

</div>

</body>

</html>
With that in place, our goal is to take that <h1> headline and position it absolutely
overlapping the image to give it a cool banner effect. It would almost be like the text
itself is part of the banner. This is a two-step process. First, we
assign position:relative to the parent of the element we want to absolutely position.
So the parent of the <h1> is the div with an id of #banner. Once that is in place, we
target the <h1> itself and apply position:absolute.

#banner {

position: relative;

h1 {
position: absolute;

bottom: 10px;

left: 140px;

CSS
Copy

Looks pretty good! Absolutely positioned elements work in conjunction


with containing blocks. Since overlap occurs with absolute positioning, you can
make use of the z-index to adjust the stacking order of elements on the page to get
the result you are looking for. So with Position Absolute, we can remember that:

● The element is taken out of the normal document flow


● The original space in the document is no longer preserved
● Will often use with a parent element whose position is relative
3. Position Fixed
Position fixed is like taking an element and tacking it directly to the screen. In other
words, the element stays fixed in one position in the window even when the user
scrolls the page. Of course this means that fixed elements are taken out of the normal
document flow and are positioned relative only to the browser window itself. Fixed
positioning can get you in to trouble, so be careful with it. One use you might see
with fixed positioning however is a fixed navigation bar. Let’s see an example of
that.
Here is out HTML which now has a nav area near the top of the page.

<html>

<head>

<title>CSS Positioning Tutorial</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<nav>

<ul>

<li>Link 1</li>

<li>Link 2</li>

<li>Link 3</li>

<li>Link 4</li>

<li>Link 5</li>

</ul>
</nav>

<div class="container">

<section>

<img src="beach.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="berries.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="building.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="cave.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="city.png" width="200">

Lorem ipsum dolor sit...


</section>

<section>

<img src="concert.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="design.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="lake.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="fish.png" width="200">

Lorem ipsum dolor sit...

</section>

<section>

<img src="friends.png" width="200">

Lorem ipsum dolor sit...

</section>
</div>

</body>

</html>

Markup
Our goal is to make this nav bar sticky to it sticks to the top of the page and is visible
no matter what, even when scrolling. To do this, we can assign the nav a position of
fixed, and then set the top to zero and the left to zero. This effectively sticks this
navigation menu to the top of the page, and it will continue to be visible during
scrolling. This is a common use case for a fixed positioning.
css

nav {

width: 100%;

background-color: #333;

padding: 20px;

position: fixed;

top: 0;

left: 0;

nav li {

list-style-type: none;

margin: 0 10px;

color: white;

float: left;
}

ul::after {

display: block;

content: "";

clear: both;

In summary, fixed positioning has these traits:

● The element is removed from normal document flow


● Offset values for fixed elements are always relative to the viewport
● The element retains position even during web page scrolling

Lab Task
Create web pages on any emerging topic using positioning elements

You might also like