| <html lang="en"> |
| <head> |
| <title>Relative Locators</title> |
| <style> |
| table { |
| text-align: center; |
| border: solid; |
| } |
| td { |
| border: solid; |
| } |
| #center { |
| width: 100px; |
| } |
| #rectangles { |
| position: relative; |
| } |
| #rectangles div { |
| position: absolute; |
| border: 1px solid black; |
| height: 50px; |
| width: 50px; |
| } |
| #a { |
| left: 25px; |
| top: 0; |
| } |
| #b { |
| left: 78px; |
| top: 30px; |
| } |
| #c { |
| left: 131px; |
| top: 60px; |
| } |
| #d { |
| left: 0; |
| top: 53px; |
| } |
| #e { |
| left: 53px; |
| top: 83px; |
| } |
| #f { |
| left: 106px; |
| top: 113px; |
| } |
| #proximity .small { |
| border: 1px solid black; |
| width: 100px; |
| height: 50px; |
| margin: 5px 25px; |
| } |
| #proximity .big { |
| border: 1px solid black; |
| width: 150px; |
| height: 400px; |
| } |
| #rect3 { |
| margin: 60px 25px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Relative Locator Tests</h1> |
| <section id="paragraphs"> |
| <p id="above">This text is above.</p> |
| <p id="mid">This is a paragraph of text in the middle.</p> |
| <p id="below">This text is below.</p> |
| </section> |
| |
| <table> |
| <tr> |
| <td id="topLeft">1</td> |
| <td id="top">2</td> |
| <td id="topRight">3</td> |
| </tr> |
| <tr> |
| <td id="left">4</td> |
| <td id="center">5</td> |
| <td id="right">6</td> |
| </tr> |
| <tr> |
| <td id="bottomLeft">7</td> |
| <td id="bottom">8</td> |
| <td id="bottomRight">9</td> |
| </tr> |
| </table> |
| |
| <section id="rectangles"> |
| <div id="a">El-A</div> |
| <div id="b">El-B</div> |
| <div id="c">El-C</div> |
| <div id="d">El-D</div> |
| <div id="e">El-E</div> |
| <div id="f">El-F</div> |
| </section> |
| |
| <section id="proximity"> |
| <div class="small" id="rect1">Rectangle 1</div> |
| <div class="big" id="rect2">Rectangle 2, which is near Rectangle 1</div> |
| <div class="small" id="rect3">Rectangle 3</div> |
| <div class="big" id="rect4"> |
| Rectangle 4, which is not near Rectangle 2 because it is more than 50 px away |
| </div> |
| </section> |
| |
| </body> |
| </html> |
