Paths: Absolute VS Relative to Server VS Relative to Page

by Michael Prosser

HTML

<h1>Paths: Absolute VS Relative to Server VS Relative to Page</h1>
<p>We have a page located at https://sleekinteractive.com/ that is loading in an image.</p><p>We can load the image 3 ways when it is hosted on the same server as the page.</p><p>When it is not we are forced to use Absolute Paths (with protocol http:// https://)
</p>
<h3>Absolute:</h3>
<p>Full path with protocol(http:// of https://).</p>
<p>Example: https://sleekinteractive.com/assets/ui.jpg</p>
<h3>Relative to Server:</h3>
<p>Relative path using the host as a base(no protocol).</p>
<p>Example: /assets/ui.jpg</p>
<h3>Relative to Page:</h3>
<p>Relative path using the page as a base(no protocol).</p>
<p>Example: assets/ui.jpg</p>

CSS

body {
  font-family: helvetica, serif;
  margin: 20px;
  padding-top: 50px;
}
h1{
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  background-color: #666;
  color: #fff;
  padding: 10px;
  margin: 0px;
}