Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Default order</title>
  </head>
  <body>
    <div><span>unpositioned elements</span></div>
    <div><span>are rendered according to </span></div>
    <div><span>order of appearance</span></div>
  </body>
</html>
 
body {
  margin: 0;
  padding: 0;
}
div {
  width: 200px;
  height: 100px;
  padding: 5px;
  position: relative;
}
div:first-child {
  background: red;
}
div:nth-child(2) {
  background: pink;
  margin: -20px 0 -20px 40px;
}
div:nth-child(3) {
  background: yellow;
  margin-left: 80px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers