positioning css html code example

Example 1: what are the types of positioning in 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 2: 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 3: relative positioning html

/*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.*/
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Example 4: 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! -->

Tags:

Html Example

Recent Posts