Scribd
Upload
4 views

Position (HTML)

The document provides an overview of CSS positioning, including the five position values: static, relative, absolute, fixed, and sticky, along with their applications. It also explains the float property, its values (left, right, inherit, none), and the clear property, detailing how they affect element positioning and formatting. Formative activities are included to practice applying these concepts in web design.

Uploaded by

macadupangjalanie0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

Position (HTML)

The document provides an overview of CSS positioning, including the five position values: static, relative, absolute, fixed, and sticky, along with their applications. It also explains the float property, its values (left, right, inherit, none), and the clear property, detailing how they affect element positioning and formatting. Formative activities are included to practice applying these concepts in web design.

Uploaded by

macadupangjalanie0
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Information & Communication Technology

CSS Position
1. Describe the keywords
to be used for CSS
position.
2. Understand the concept
OBJECTIVES
of each value of the CSS
position property .
3. Apply CSS position on
the webpage.
CSS POSITIONING

The position property specifies the type


of positioning method used for an
element. There are five different
position values
static - default
relative - based on the
origin of the last element.
Possible overlapping.
absolute - ignore the
elements’ position and
search for a non-static
parent element.
fixed - Element will
stay on a specific
area of your viewport.
sticky - Element will
stay on a specific
area of its origin.
FORMATIVE ACTIVITY

Apply the position property on the


navigation bar of your webpage. (long-
content pages).
CSS FLOAT

The float property is used for positioning


and formatting content. In its simplest
use, the float property can be used to
wrap text around images.
CSS FLOAT

The following values for float:


left - The element floats to the left of
its container
right - The element floats to the right
of its container
CSS FLOAT

The following values for float:


inherit - The element inherits the
float value of its parent
none - default
CLEAR PROPERTY

The clear property specifies what should


happen with the element that is next to
a floating element.
CLEAR PROPERTY

The following values for clear:


left - The element is pushed below
left floated elements
right - The element is pushed below
right floated elements
CLEAR PROPERTY

The following values for clear:


both - The element is pushed below
both left and right floated elements
inherit - The element inherits the
clear value from its parent
FORMATIVE ACTIVITY

In this task, you need to float the two


elements left and right, respectively.
The text should then appear between
the two boxes.
FORMATIVE ACTIVITY

In this task, the element should be


floated left. Then we want the first line
of text to display next to that element,
but the following line of text to display
underneath it.

You might also like