Skip to content
Search

CSS:position

lastmod 2025-02-13created 2014-03-288 edits

Options

static
Default position following the document flow (default)
Position properties such as top right bottom left are ignored.
absolute
If there is a first (non-static) parent element, positioned relative to that parent.
  • To be positioned relative to the parent, the parent must have one of relative, absolute, fixed.
If there is no first (non-static) parent element, positioned relative to the browser window.
Position changes when scrolling.
The exact position is set with the top right bottom left properties.
The element that came after it takes its place.
When you set an element's position property to absolute, it is conventional to set the parent element's position property to relative.
relative
Positioned relative to its relative position (where it originally sat).
Relative to the element's current default position when static
The exact position uses the top right bottom left properties.
The element's default position is kept as empty space
fixed
Always relative to the browser window.
The exact position is set with the top right bottom left properties.
The element that came after it takes its place.
Careful, it can slow down page loading !! (see the bottom) <- needs checking.
Supported in IE7 and later
sticky
Behaves like relative, then when scrolling reaches the set top, left values, it sticks there.
Unlike relative, right and bottom values are not applied. (tried it myself -_-;)
Used for making menus that stick to the top when scrolling.3. Depending on the browser, may not work with overflow:hidden or overflow:auto.
Not supported in IE
unset
Resets to the inherited value if the property is inherited from the parent, otherwise to the initial value
inherit
Inherits the parent element's property
initial
Resets the property

relative

An example that puts text in the center of a chart.js doughnut chart shows how to use it.

HTML file: 

<div class="relative">
  <canvas id="myChart"></canvas>      
  <div class="absolute-center text-center">
    <p>Some text</p>
    <p>Some text</p>
  </div>
</div>

(included out of courtesy) JavaScript file: 

var data = {
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
};

var promisedDeliveryChart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
    responsive: true,
    legend: {
      display: false
    }
  }
});

CSS file (this is the main part): 

.relative {
  position: relative;
}

.absolute-center {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text-center{
  text-align: center;
}

p {
  font-size: 1.5rem;
}

Favorite site

author Zer0 sitemap