static position and relative position : position static « Layout « HTML / CSS






  1. HTML / CSS
  2. Layout
  3. position static

static position and relative position

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  color: #000;
  background-color: #ccc;
}


.myStyle {
  position: static;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  border: 1px solid #000;
  width: 20%;
}
.different {
  position: relative;
  top: 25px;
  right: 25px;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
  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>








Related examples in the same category

1.Using Static Positioning
2.width:auto stretches a static block
3.setting width to a value, margin-left to auto, and margin-right to auto centers a static block
4.Static Positioned
5.use position:static to unposition an element so that it is rendered normally in the flow.
6.Stacking Context
7.Elements flow automatically one after the other in lines and blocks
8.Stretched Absolute
9.Sized Static Block left offset
10.Stretched Static Block left offset
11.Sized Static Block centered aligned
12.Stretched Static Block center aligned