blob: 02f0172a21e7fba3b58676f9e8c61d130a6eba85 [file] [log] [blame]
<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>