Родственные отношения: что это такое и как это работает

Относительный путь (или relative path на английском) представляет собой адрес файлового ресурса относительно текущего рабочего каталога. Это может быть директория или подкаталог в текущем каталоге, вокруг которого будут построены ссылки на другие файлы и папки.

Как правило, относительные пути используются для ссылок на файлы, которые находятся в той же структуре каталогов, что и исходный документ HTML, CSS или JS. Они обычно начинаются с символа точки (.), что означает текущую директорию, или символа двух точек (..), что означает родительскую директорию.

Допустим, что у вас есть следующая структура каталогов:

root/
    ├── css/
    │   └── style.css
    ├── img/
    │   ├── logo.png
    │   └── banner.jpg
    └── index.html

Исходный файл `index.html` ссылается на файлы стилей и изображения с помощью относительных путей. Например, чтобы подключить файл `style.css`, мы можем использовать относительный путь `css/style.css`:

html


  
    
  
  
    
    
  

Если мы хотим ссылаться на изображение `logo.png` из файла `style.css`, мы можем использовать относительный путь `../img/logo.png`, где две точки означают родительскую директорию:

css
body {
  background-image: url("../img/banner.jpg");
}
.logo {
  background-image: url("../img/logo.png");
}

Относительные пути могут стать проблемой, если структура каталогов слишком сложная или если файлы перемещаются. В таких случаях лучше использовать абсолютные пути, чтобы обеспечить точное местоположение файлов.