### What happened?

The "near" relative locator fails to locate elements in certain cases, like when a narrower object is directly above a wider object (see provided screenshot).
![obrazek](https://user-images.githubusercontent.com/1508117/202175226-2d45f55e-e250-4f48-8734-1fcabd65d185.png)

In this case, trying to locate " 'Rectangle 1' near 'Rectangle 2' " results in a `NoSuchElementException` exception even though the rectangles certainly look like they are within 50 px of each other.

I actually located the source of the issue:

https://github.com/SeleniumHQ/selenium/blob/abde4ce306d81ad913b2d9353b4f25588ec9c317/javascript/atoms/locators/relative.js#L169-L211

The algorithm to determine the proximity of object boundaries seems to perform some naive calculations, whereas what probably is desired is to calculate the shortest distance between the two rectangles' boundaries (or centres if they are overlapping).

So the code probably ought to look something like the example in this StackOverflow answer (https://stackoverflow.com/a/26178015).

I wrote that this issue is present in Selenium 4.6.0 for Python, but since the issue seems to stem from some JavaScript atoms, the issue is probably present in all versions of Selenium, but I did not check, since I only use Selenium for Python.

### How can we reproduce the issue?

```shell
https://github.com/alpatron/SeleniumRelativeLocatorBug
```


### Relevant log output

```shell
DevTools listening on ws://127.0.0.1:12320/devtools/browser/9ef7f89b-4fcb-40f3-9789-dbff1edade6b
Traceback (most recent call last):
  File "C:\Users\Vikto\Desktop\SeleniumTests Big Boy\SeleniumRelativeLocatorBug\bug.py", line 8, in <module>
    driver.find_element(
  File "C:\Users\Vikto\Desktop\SeleniumTests Big Boy\Lib\site-packages\selenium\webdriver\remote\webdriver.py", line 848, in find_element
    raise NoSuchElementException(f"Cannot locate relative element with: {by.root}")
selenium.common.exceptions.NoSuchElementException: Message: Cannot locate relative element with: {'id': 'rect1'}
```


### Operating System

Windows 10 21H1

### Selenium version

Python 4.6.0 (but should be present in all versions; see "What happened" section)

### What are the browser(s) and version(s) where you see this issue?

Chrome 107

### What are the browser driver(s) and version(s) where you see this issue?

ChromeDriver 107.0.5304.62

### Are you using Selenium Grid?

No
*
 * <p>In addition, be aware that the relative locators all use the "client bounding rect" of
 * elements to determine whether something is "left", "right", "above" or "below" of another. Given
 * the example:
 *
 * <pre>
 *   +-----+
 *   |  a  |---+
 *   +-----+ b |
 *       +-----+
 * </pre>
 *
 * Where {@code a} partially overlaps {@code b}, {@code b} is none of "above", "below", "left" or
 * "right" of {@code a}. This is because of how these are calculated using the box model. {@code
 * b}'s bounding rect has it's left-most edge to the right of {@code a}'s bounding rect's right-most
 * edge, so it is not considered to be "right" of {@code a}. Similar logic applies for the other
 * directions.
 */
public class RelativeLocator {
  private static final Json JSON = new Json();
  private static final int CLOSE_IN_PIXELS = 100;
  
  public static RelativeBy with(By by) {
    Require.nonNull("By to look for", by);
    return new RelativeBy(by);
  }
  public static class RelativeBy extends By implements By.Remotable {
    private final Object root;
    private final List<Map<String, Object>> filters;
    private RelativeBy(Object rootLocator) {