html position relative code example
Example 1: fixed positioning html
/*
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.
ex; Navigation BARS
A fixed element does not leave a gap in the page where it would normally have
been located.
Here is the CSS that is used:*/
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}Example 2: position css
The types of positioning in CSS are-
1)static: this is the default value.
2)sticky: the element is positioned based on the user's scroll position.
3)fixed: the element is positioned related to the browser window.
4)relative: the element is positioned relative to its normal position.
5)absolute: the element is positioned absolutely to its first positioned parent.Example 3: static positioning html
/*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
div {
position: static;
border: 3px solid #73AD21;
}Example 4: css block position
/******************* BASIC BLOCK POSITIONING **********************/
/******************** Static Position *************************/
/*All elements are static in their position by default. Which means
that, all elements are organized just like they would if your code
didn't have any CSS and were just pure HTML */
tag_name {
position: static;
}
/******************** Relative Position *************************/
/*It allow us to position this element relative to how it would have
been positioned had it been static. You can use the coordinate
properties to guide this element (by giving some margins to the block),
relative to what was the standard layout. This new position will not
influence the distribution of other elements (the others will keep
the standard layout, as if your element leaves a "shadow" of where it
was supposed to be). Therefore, some overlaps and lack of coordination
can occur when you move your element*/
tag_name {
position: relative;
left: 30px;
right: 10px;
bottom: 2px;
top: 4px;
z-index: 1; /* It decides which element will show on top of the
other. The first to show, is the one with the
greatest index */
}
/******************** Absolute Position *************************/
/* With this property, we are able to position the element relative
to the <body> or relative to it's parent, IF the parent is itself isn't
"static". Using the coordination properties, we do not increase or
decrease the margins in relation to the standard position, but rather,
we are increasing or decreasing the distance in relation to the "walls"
of the block that contains this element, for example, a parent <div>
that contains a <h1> element. The name "absolut", comes from the cases
where the parent is the <body> element. When you use this property,
you are taking the element away from the natural flow of your document,
so, the other elements position will not take into account your absolute
element*/
tag_name {
position: absolute;
left: 30px;
right: 10px;
bottom: 2px;
top: 4px;
z-index: 1; /* It decides which element will show on top of the
other. The first to show, is the one with the
greatest index */
}
/* For exemple: */
div{
position: relative;
}
h1 {
position: absolute; /* In relation to the div element*/
left: 30px;
top: 4px;
}
/******************** Fixed Position *************************/
/*As soon as the element is fixed in a certain position, relative
to it's parent, then, whenever we scroll down the webpage, the element
maintains its fixed position on the screen. This property will also
make the other html elements, ignore the position of this element
during their layout (it takes it away from the natural flow of the
document). */
tag_name {
position: fixed;
left: 30px;
right: 10px;
bottom: 2px;
top: 4px;
z-index: 2; /* It decides which element will show on top of the
other. The first to show, is the one with the
greatest index */
}
/******************** Sticky Position *************************/
/* This property will stick the element to the screen when you
reach its scroll position */
tag_name {
position: -webkit-sticky; /* For Safari */
position: sticky;
left: 20px;
right: 60px;
bottom: 5px;
top: 13px;
}
/******************* NOTES ABOUT THE Z-INDEX **********************/
/* By default, the z-index of an element is zero, so if you change the
z-index to something above or below that value, you are putting that
element above or below the ones you didn't change.
Another important thing to be aware of is that the z-index only worked
for elements that have a position different from the standard. This
means that, for elements with Static position, this won't work.
So, you can only make two elements interact in the z plane if they both
have a define position as: Relative, Absolute, Fixed, ... */
tag_name_1 {
position: absolute;
z-index: -1;
}
tag_name_2 {
position: relative; /* tag_name_1 will be below the tag_name_2 */
}Example 5: css position
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}Example 6: html position div
<!DOCKTYPE html> <!-- Start of coding page -->
<html> <!-- Start of html coding -->
<head> <!-- Start of head -->
<title>TITLE<title> <!-- Title -->
<script>
//JavaScript
</script>
<style>
/* CSS */
</style>
</head> <!-- End of head -->
<body> <!-- Start of body -->
<div id='mydiv' style = "position:relative; left:0px; top:100px;">
Hello!
<!-- Use that style tag to positions things, have a play around with it! -->
</div>
</body> <!-- End of body -->
<html> <!-- End of html coding -->
<!-- Add this line of code next to your id:
style = "position:relative; left:0px; top:100px;"
too let you position divs where you want them, you can even position
them ontop of other divs! -->