We can set the position of an element with
the position property.
The position of an element is also controlled by 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.
The allowed values are:
You use the top, bottom, left, and right properties to offset the element from the element specified by the position property.
The following code demonstrates the effect of the different values.
<!DOCTYPE HTML>
<html>
<head>
<style>
img {<!--from w ww .j av a 2 s . c om-->
top: 5px;
left: 150px;
border: medium double black;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test.</p>
<img id="myID" src="http://www.java2s.com/style/download.png"/>
<p>This is a test.</p>
<p>
<button>Static</button>
<button>Relative</button>
<button>Absolute</button>
<button>Fixed</button>
</p>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
document.getElementById("myID").style.position = e.target.innerHTML;
};
}
</script>
</body>
</html>
The code above is rendered as follows:
HTML elements are positioned static by default.
A static positioned element is positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.
A static positioned element is positioned according to the normal flow of the page.
In the following HTML code div No.1 is fixed positioned and the rest of three div elements are static positioned. The static positioned are in normal flow and fixed is not in the normal flow.
<!DOCTYPE HTML>
<html>
<head>
<style>
.myStyle {<!-- w w w . j a v a2 s . c om-->
position: static;
padding: 10px;
margin: 5px;
background-color: #fff;
border: 1px solid #000;
width: 200px;
background-color:red;
}
.different {
position: fixed;
top: 0px;
left: 80px;
padding: 10px;
margin: 5px;
background-color:yellow;
border: 1px solid #000;
width: 20%;
}
</style>
</head>
<body>
<div class="different">1</div>
<div class="myStyle">2</div>
<div class="myStyle">3</div>
<div class="myStyle">4</div>
</body>
</html>
The code above is rendered as follows:
When you use the fixed value, the element is placed relative to the browser window. The element occupies the same location, even when the rest of the content is scrolled up or down.
Note: IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. Fixed positioned elements can overlap other elements.
<!DOCTYPE html>
<html>
<head>
<style>
p.pos_fixed {<!--from w w w.j ava 2s . c o m-->
position: fixed;
top: 30px;
right: 5px;
color: red;
}
</style>
</head>
<body>
<p>Some text</p>
<p class="pos_fixed">Some positioned text.</p>
</body>
</html>The following code set the height of html body to 2000px, which makes the scrollbar visible. We can scroll the scrollbar to see if the fixed positioned div elements move.
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {<!-- w w w . ja v a 2 s. c o m-->
height: 2000px;
}
div {
position: fixed;
padding: 10px;
border: 1px solid black;
opacity: 0.7;
background: #ccc;
}
#div1 {
top: 0;
left: 0;
}
#div2 {
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div id='div1'>
div1
</div>
<div id='div2'>
div2
</div>
</body>
</html>Elements with a fixed position are always positioned relative to the browser's viewport, not in a document's structure.
Elements with a fixed position stay in place, even when a document is scrolled.
<!DOCTYPE HTML>
<html>
<head>
<style>
div {<!--from w ww . jav a 2 s .co m-->
position: fixed;
background: gold;
border: 1px solid black;
width: 100px;
height: 100px;
}
div#fixed-top {
top: 5px;
left: 5px;
}
div#fixed-bottom {
bottom: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id='fixed-top'>
</div>
<div id='fixed-bottom'>
</div>
</body>
</html>From the following code we can see that position fixed is on top of normal flow elements.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css" rel="stylesheet">
p {<!-- w w w .j a v a2s .c o m-->
border-width: thin;
border-style: solid;
height: 100px;
width: 100px;
text-align: center
}
p.red {background-color: red; position: fixed; top: 0; left: 0}
p.white {background-color: white; position: fixed; top: 0; left: 150px}
p.blue {background-color: blue; position: fixed; top: 0; left: 300px}
</style>
</head>
<body>
<p class="red">
Container 1
</p>
<p class="white">
Container 2
</p>
<p class="blue">
Container 3
</p>
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</body>
</html>A relative positioned element is positioned relative to its normal position.
The relative value applies the top, bottom, left, and right properties to position the element relative to where it would be under the static value(default layout).
The following code shows the result of a relative positioning. The style "left:-20px" subtracts 20 pixels from the element's original left position. The style "left:20px" adds 20 pixels to the element's original left position.
<!DOCTYPE html>
<html>
<head>
<style>
h2.pos_left {<!--from w w w . j a va 2 s.com-->
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
</style>
</head>
<body>
<h2>Heading with no position</h2>
<h2 class="pos_left">This heading is moved left according to its normal position</h2>
<h2 class="pos_right">This heading is moved right according to its normal position</h2>
</body>
</html>A relative positioned element is positioned relative to its normal position.
Relatively positioned element are often used as container blocks for absolutely positioned elements.
<!DOCTYPE html>
<html>
<head>
<style>
.left{<!--from w w w . j av a2 s. c om-->
position:relative;
left:-20px;
}
.right{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h1>with no position</h1>
<h2 class="left">moved left</h2>
<h2 class="right">moved right</h2>
</body>
</html>The absolute positioning positions the element relative to the nearest parent that has a position value other than static. If there is no such element, the element is positioned relative to the body element.
The following code shows how to use absolute positioning. With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {<!--from ww w . jav a 2 s . c om-->
position: absolute;
left: 100px;
top: 150px;
}
</style>
</head>
<body>
<h2>This heading has an absolute position</h2>
</body>
</html>Absolutely positioned elements are removed from the normal flow. The other elements act like there is no absolute-positioned element.
Absolutely positioned elements can overlap other elements.
<!DOCTYPE html>
<html>
<head>
<style>
h2{<!--from www . j a va 2 s. c o m-->
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>This is a heading with an absolute position</h2>
</body>
</html>
z-index controls the sequence of the layers during overlap.
<html>
<head>
<style type='text/css'>
p {<!--from ww w.j a v a 2 s . com-->
width: 200px;
background-color: #ffffff;
padding: 5px;
margin: 10px;
border-style: solid;
border-color: #000000;
border-width: 2px;
}
p.one {
z-index: 3;
position: absolute;
left: 0px;
top: 0px;
}
p.two {
z-index: 1;
position: absolute;
left: 150px;
top: 25px;
}
p.three {
z-index: 2;
position: absolute;
left: 40px;
top: 35px;
}
</style>
</head>
<body>
<div class="page">
<p class="one">
Here is paragraph <b>one</b>. This will be at the top of the page.
</p>
<p class="two">
Here is paragraph <b>two</b>. This will be underneath the other
elements.
</p>
<p class="three">
Here is paragraph <b>three</b>. This will be at the bottom of the
page.
</p>
</div>
</body>
</html>