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, 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 is the default value where an element is rendered in the normal flow and not uniquely positioned.
<style>
#p_left {
border: 2px solid blue;
position: relative;
left: 90px;
}
#p_top {
border: 2px solid red;
position: static;
top: -28px;
}
</style>
<p>Example position: static</p>
<h3 id='p_left'>Position relative, left: 90px.</h3>
<h3 id='p_top'>Position static, top: -28px.</h3>
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, left.
<style>
#p_left {
border: 2px solid blue;
position: relative;
left: 90px;
}
#p_top {
border: 2px solid red;
position: relative;
top: -25px;
}
</style>
<p>Example position: relative</p>
<h3 id='p_left'>Position relative, left: 90px.</h3>
<h3 id='p_top'>Position relative, top: -25px.</h3>
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.
<style>
#p_left {
border: 2px solid blue;
position: absolute;
top: 15px;
left: 80px;
}
#p_right {
border: 2px solid red;
position: absolute;
right: 25px;
}
</style>
<h3 id='p_left'>Absolute left: 80</h3>
<h3 id='p_right'>Absolute right: 25</h3>
<style>
.relativ { border: 2px solid blue; position:relative; top:30px; left:50px; }
.absolut { position:absolute; top:15px; left:0px; }
</style>
<div class='relativ'>
Relative...
<div class='absolut'>Absolute, coursesweb.net </div>
...
</div>
<style>
.absolut { border: 2px solid blue; position:absolute; top:20px; left:25px; }
.relativ { position:relative; top:10px; left:5px; }
</style>
<div class='absolut'>
Absolute...
<div class='relativ'>Relative, GamV.eu </div>
...
</div>
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 (screen), and similarly, 'bottom:0px; right:0px;' is the bottom-right corner.
<style>
body { height:1400px; }
#p_fix {
background:#cecefe;
position: fixed;
top: 25px;
left: 30%;
width:300px;
height:85px;
}
</style>
<h4>Example position: fixed</h4>
<h3 id='p_fix'>If you scroll the page, this element remains fixed on screen.</h3>
z-index property specifies the stack order of an element (which element should be placed behind, or, in front of others).
<style>
#dv1 {
position: absolute;
top: 15px;
left: 50px;
background-color: #fee0e0;
z-index: 99;
}
#dv2 {
position: absolute;
top: 9px
left: 5px;
background-color: #d0f0d0;
color: #0000dd;
}
</style>
<div id='dv1'>The First DIV</div>
<div id='dv2'>Content of the second DIV</div>
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class {
display: list-item;
}var obj = {
"courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr); // {"courses":["php","javascript","ajax"]}$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue; // CoursesWeb.net