CSS top property

The CSS top property is one of many CSS properties that can be used to control the position of an element on a web page. It specifies how far up from the bottom edge of the containing box, or parent element, the content should be displayed.

CSS top property is used to define the position of an element relative to its content’s container. It allows you to place elements in any part of the page, relative or absolute. The properties on a Top include fixed positioning (fixed) and sticky positioning (sticky).

CSS Top Syntax:

The CSS top property accepts a length in pixels as its value.

Syntax:

top: 25px;

Example:

top: 100px; top: 2cm; top: 10%.

The top would be set at a value from the top.

Note: Top elements are dependent on their positioning relative to other content for maximum effectiveness and can be used strategically wherever needed: in headers, footers, sidebars… anywhere!

body {
  background: beige;
}

div {
  position: absolute;
  top: 10%;
  right: 40%;
  bottom: 20%;
  left: 15%;
  background: gold;
  border: 1px solid blue;
}
<div>This is a really cool project that I did over the summer. The size of this content appears to be determined by where its edges are placed because when you have it in one position and then move it, what was once empty space now becomes text or an image!</div>

Parameters or Arguments:

The top property can be set to any number of pixels. However, it is best practice if you use either one unit or multiple units with no spaces separating them when using the top property.

Top: fixed number | Initial | inherit | auto

Example 1:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 300px;
        width: 80%;
        border: 3px solid #8ebf42;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        top: 10px;
        border: 3px solid #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Bottom property example</h2>
    <div class="parent">
      The position of this div is set to relative.
      <div class="absolute">This div has a pink background and is placed 10 pixels up from the bottom of its container. It's position was set to absolute in order for it to be fixed on top of everything else so that only this content can be seen as you scroll down.</div>
    </div>
  </body>
</html>

Example 2: With all position

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 180px;
        border: 3px solid #8AC007;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        top: 20px;
        border: 3px solid #8AC007;
      }
      div.relative {
        position: relative;
        width: 50%;
        top: 2px;
        border: 3px solid #8AC007;
      }
      div.fixed {
        position: fixed;
        width: 50%;
        top: 50px;
        border: 3px solid #8AC007;
      }
      div.sticky {
        position: sticky;
        width: 50%;
        top: 10px;
        border: 3px solid #8AC007;
      }
    </style>
  </head>
  <body>
    <h2>CSS top property example</h2>
    <div class="parent">
      position: relative.
      <div class="absolute"><strong>position: absolute and top 20px</strong>
        <br>The div's top edge is placed 20 pixels above the container.</div>
    </div>
    <br>
    <div class="parent">
      position: relative.
      <div class="relative"><strong>position: relative and top 2px</strong>
        <br>The div is positioned 2 pixels below its normal position.</div>
    </div>
    <br>
    <div class="fixed"><strong>position: fixed and top 50px</strong>
      <br>You can put this div 50 pixels from the top of your viewport.</div>
    <div class="parent">
      This div element has position: relative.
      <div class="sticky"><strong>position: sticky and top 10px</strong>
        <br>This div is sticky.</div>
    </div>
  </body>
</html>

Browser Compatibility:

One of the most popular CSS properties, the top is also one with a wide range of browser support. For example, Google Chrome and Mozilla Firefox are both compatible browsers for this property while Internet Explorer versions lower than 11 aren’t.

Concluding:

The top CSS property is a very simple way to change the vertical position of content on your webpage. Understanding how it works can help you be more efficient in designing interactive websites and apps that are easy for people to use. If you have any questions or want some tips, feel free to contact us- we’re experts at this stuff!

Also Read: CSS Bottom Property

Follow us on Facebook

Leave a Comment