Career Digital Skills Program
Web Development - CSS 04
CSS Layout - The position Property
The position property specifies the type of positioning method used for an element (static,
relative, fixed, absolute or sticky).
There are five different position values:
1. static
2. relative
3. fixed
4. absolute
5. sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the position value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:
This <div> element has position: static;
Here is the CSS that is used:
Example
[Link] {
position: static;
border: 3px solid #73AD21;
}
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it
to be adjusted away from its normal position. Other content will not be adjusted to fit into any
gap left by the element.
This <div> element has position: relative;
Example
[Link] {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always
stays in the same place even if the page is scrolled. The top, right, bottom, and left properties
are used to position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:
Example
[Link] {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document
body, and moves along with page scrolling.
Note: Absolute positioned elements are removed from the normal flow, and can overlap
elements.
Career Digital Skills Program | 0334-9511133 Page 2
Example
[Link] {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
[Link] {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky;
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in place
(like position:fixed).
In this example, the sticky element sticks to the top of the page (top: 0), when you reach its
scroll position.
Example
[Link] {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
CSS Layout - The z-index Property
When elements are positioned, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed
in front of, or behind, the others).
Career Digital Skills Program | 0334-9511133 Page 3
An element can have a positive or negative stack order:
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Note: z-index only works on positioned elements (position: absolute, position: relative,
position: fixed, or position: sticky) and flex items (elements that are direct children of display:
flex elements).
Another z-index Example
Here we see that an element with greater stack order is always above an element with a lower
stack order:
<html>
<head>
<style>
.container {
position: relative;
}
.black-box {
position: relative;
z-index: 1;
border: 2px solid black;
height: 100px;
margin: 30px;
}
.gray-box {
position: absolute;
z-index: 3;
background: lightgray;
height: 60px;
width: 70%;
left: 50px;
top: 50px;
}
Career Digital Skills Program | 0334-9511133 Page 4
.green-box {
position: absolute;
z-index: 2;
background: lightgreen;
width: 35%;
left: 270px;
top: -15px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="black-box">Black box</div>
<div class="gray-box">Gray box</div>
<div class="green-box">Green box</div>
</div>
</body>
</html>
CSS Layout - Overflow
The CSS overflow property controls what happens to content that is too big to fit into an area.
CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.
The overflow property has the following values:
visible - Default. The overflow is not clipped. The content renders outside the element's box
hidden - The overflow is clipped, and the rest of the content will be invisible
scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
auto - Similar to scroll, but it adds scrollbars only when necessary
Note: The overflow property only works for block elements with a specified height.
Career Digital Skills Program | 0334-9511133 Page 5
overflow: visible
By default, the overflow is visible, meaning that it is not clipped and it renders outside the
element's box:
You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.
Example
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is hidden:
You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.
Example
div {
overflow: hidden;
}
overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the
box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need
it):
You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.
Example
div {
overflow: scroll;
}
overflow: auto
The auto value is similar to scroll, but it adds scrollbars only when necessary:
Career Digital Skills Program | 0334-9511133 Page 6
You can use the overflow property when you want to have better control of the layout. The
overflow property specifies what happens if content overflows an element's box.
Example
div {
overflow: auto;
}
CSS Layout - float and clear
The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on
which side.
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to
the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is
default
inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
Example
img {
float: right;
}
Example
img {
float: left;
}
Career Digital Skills Program | 0334-9511133 Page 7
Pineapple Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum, nisi lorem egestas odio, vitae scelerisque enim
ligula venenatis dolor. Maecenas nisl est, ultrices nec
congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare
eu, lobortis in odio. Praesent convallis urna a lacus
interdum ut hendrerit risus congue. Nunc sagittis dictum
nisi, sed ullamcorper ipsum dignissim ac...
In above example image is set to float left.
CSS Layout - clear and clearfix
The clear Property
When we use the float property, and we want the next element below (not on right or left), we
will have to use the clear property.
The clear property specifies what should happen with the element that is next to a floating
element.
The clear property can have one of the following values:
none - The element is not pushed below left or right floated elements. This is default
left - The element is pushed below left floated elements
right - The element is pushed below right floated elements
both - The element is pushed below both left and right floated elements
inherit - The element inherits the clear value from its parent
When clearing floats, you should match the clear to the float: If an element is floated to the
left, then you should clear to the left. Your floated element will continue to float, but the
cleared element will appear below it on the web page.
Example
This example clears the float to the left. Here, it means that the <div2> element is pushed
below the left floated <div1> element:
div1 {
float: left;
}
Career Digital Skills Program | 0334-9511133 Page 8
div2 {
clear: left;
}
The clearfix Hack
If a floated element is taller than the containing element, it will "overflow" outside of its
container. We can then add a clearfix hack to solve this problem:
Example
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins
and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to
use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Career Digital Skills Program | 0334-9511133 Page 9