Positioning elements using CSS is more accurate than using graphical HTML objects or tables, and makes the display much faster.
By using CSS, you can position a HTML element in different ways: fixed, absolute or relative, in relation to other elements.
The positioning of an element is based on the parameters: top, right, bottom, and left. Typically, top and left will be used for positioning elements, since the start point is the top-left corner.
- There are four different positioning methods (or values): static, relative, absolute and fixed; these are applied to position property.

static

static is the default value where an element is rendered in the normal flow and not uniquely positioned.
Static positioned elements are not affected by the top, bottom, left, and right properties.
  - Syntax:

relative

A relative positioned element is positioned relative to its normal position, does not take the element out of the normal flow, and it will create a new point of origin for any of its child elements that may be positioned absolutely.
The content of relatively positioned elements can be moved and overlap other elements, by using negative values for top, right, bottom or left.
  - Syntax:   - Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>relative</title>
 <style type="text/css"><!--
 #p_left {
  position: relative;
  left: 30px;
 }
 #p_top {
  position: relative;
  top: -28px;
 }
 --></style>
</head>
<body>
 <h3 id="p_left">Position left: 30</h3>
 <h3 id="p_top">Position top: -28</h3>
</body>
</html>
  - Result:

Position left: 30

Position top: -28

absolute

An absolute position element is positioned relative to the first parent element that has a position other than static, or <html> if no such element exists, and its display is not affected by other elements.
Absolute positioning takes the element out of the normal document flow, and can overlap other elements.
  - Syntax:   - Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>absolute</title>
 <style type="text/css"><!--
 #p_left {
  position: absolute;
  top: 15px;
  left: 80px;
 }
 #p_right {
  position: absolute;
  right: 25px;
 }
 --></style>
</head>
<body>
 <h3 id="p_left">Absolute left: 80</h3>
 <h3 id="p_right">Absolute right: 25</h3>
</body>
</html>
  - Result:

Absolute right: 25

Absolute left: 80

fixed

Fixed positioning is based on the viewport window. The origin for fixed-positioned elements is the root node (<html>). The top-left position of 0, 0 would be the top-left corner of the viewport, and similarly, "bottom:0px; right:0px;" is the bottom-right corner.
Fixed positioned elements can overlap other elements and it will not move even if the window is scrolled.
  - Syntax:   - Example (a tag with id="p_fix" is positioned fixed):
#p_fix {
  position: fixed;
  top: 20px;
  left: 40%;
}

z-index

The z-index property specifies the stack order of an element (which element should be placed behind, or, in front of others).
The index placement of the elements is made automatically, starting with 0 and continuing through the increment by one, in order of their appearance in the HTML document and relative to their parent.
An element with greater stack order is always in front of an element with a lower stack order.
- z-index can change the display order, but this property only works on positioned elements (position:absolute, position:relative, or position:fixed)
  - Values   - Syntax:   - Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>z-index</title>
 <style type="text/css"><!--
 #dv1 {
  position: absolute;
  top: 4px;
  left: 50px;
  background-color: #fee8e8;
  z-index: 99;
 }
 #dv2 {
  position: absolute;
  top: 1px
  left: 5px;
  background-color: #e8fee8;
  color: blue;
 }
 --></style>
</head>
<body>
 <div id="dv1">The First DIV</div>
 <div id="dv2">Content of the second DIV</div>
</body>
</html>
As you can see, the content of the first DIV is displayed over the second DIV. You can see the difference if you test this code and remove "z-index: 99" from the "#dv1".
  - Result:
The First DIV
Content of the second DIV

• When an absolutely positioned element is included inside an element with relative position (called "parent"), the absolutely positioned element uses the top-left corner origin of the parent.
  - Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>relative-absolute</title>
 <style type="text/css"><!--
 .relativ { position:relative; top:30px; left:50px; }
 .absolut { position:absolute; top:15px; left:0px; }
 --></style>
</head>
<body>
 <div class="relativ">
...
  <div class="absolut"> coursesweb.net </div>
...
 </div>
</body>
</html>

• When a relatively positioned element is placed inside an absolute positioned element, it will move with the element positioned absolute (its parent).
  - Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>absolute-relative</title>
 <style type="text/css"><!--
 .absolut { position:absolute; top:20px; left:25px; }
 .relativ { position:relative; top:10px; left:5px; }
 --></style>
</head>
<body>
 <div class="absolut">
...
  <div class="relativ"> marplo.net </div>
...
 </div>
</body>
</html>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Positioning

Last accessed pages

  1. PHP MySQL - using MySQLi (8250)
  2. Get Duration of Audio /Video file before Upload (5808)
  3. Insert, Select and Update NULL value in MySQL (26455)
  4. Ajax-PHP Rating Stars Script (12967)
  5. Read Excel file data in PHP - PhpExcelReader (56584)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (321)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (265)
  3. Register and show online users and visitors (253)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)
  5. Insert, Select and Update NULL value in MySQL (157)