CSS Layout How to - Shift 50px from its original position

Question

We would like to know how to shift 50px from its original position.

Answer


<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of CSS relative positioning</title>
<style type="text/css">
p {<!-- w w w  . j av  a  2  s  .  c  om-->
  background: #FFDEAD;
  padding: 10px;
}

p.positioned {
  position: relative;
  left: 50px;
}
</style>
</head>
<body>
  <p>This is a normal paragraph.</p>
  <p class="positioned">The left margin edge of this paragraph is
    shifted to right by 50px from its original position.</p>
</body>
</html>

The code above is rendered as follows: