InfoHeap
Tech tutorials, tips, tools and more
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search

CSS properties

  • CSS3 flexbox
  • all
  • animation
  • background-color
  • background-image
  • border
  • border-color
  • border-radius
  • border-style
  • border-width
  • bottom
  • box-shadow
  • box-sizing
  • calc function
  • clip
  • color
  • color value currentColor
  • color values
  • cursor
  • float
  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • generated content
  • left
  • letter-spacing
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline
  • outline-color
  • outline-style
  • outline-width
  • overflow
  • padding
  • pointer-events
  • position
  • resize
  • right
  • text-align
  • text-decoration
  • text-indent
  • text-overflow
  • text-shadow
  • text-transform
  • top
  • transform
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • visibility
  • white-space
  • word-break
  • word-spacing
  • word-wrap/overflow-wrap
  • z-index
 
  • Home
  • > Tutorials
  • > CSS
  • > CSS properties

CSS top

on Oct 9, 2016

CSS top property decides the top offset for positioned elements. An element is considered positioned if its position property has value other than static.

CSS property top

CSS version: CSS 2.1
Value: length | percentage | auto | inherit
Initial: auto
Applies to: positioned elements
Inherited: no
Percentage: percentage of height of containing block
Few points to note

  1. property top can be applied to positioned elements (fixed, relative, absolute)
  2. For absolute element the offset is relative to nearest positioned container.
  3. For relative element the offset is relative to the element’s normal position itself.
  4. In case value is specified as percentage, it is percentage of containing block width.
  5. Negative values are ok.

Example – css top property

In the following code, CSS property top can be changed to the following values
  • 50px
  • 25%
  • 0
  • -10px
<style type="text/css">
.container {
  position: relative;
  background-color: gray;
  width:150px; height: 100px;
}
.boxwithoffset {
 position: absolute;
 background-color:lightblue;
 width: 80px;
 left: 0px; top: 50px;
}
</style>
<div class="container">
  <div>regular text</div>
  <div class="boxwithoffset">box with top offset</div>
</div>
top refresh done
try it online

Related

  • CSS left
  • CSS right
  • CSS bottom

Suggested posts:

  1. CSS right
  2. CSS left
  3. CSS bottom
  4. Css position property – static, relative, absolute and fixed positioning
  5. css z-index – ordering of overlapping elements
  6. How to display text on image using css
  7. CSS text-indent – indent text in a block
  8. jQuery ui – make an element draggable
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS properties, Tutorials, Web Development

Follow InfoHeap

facebook
twitter
googleplus
  • Browse site
  • Article Topics
  • Article archives
  • Recent Articles
  • Contact Us
  • Omoney
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries

Copyright © 2023 InfoHeap.

Powered by WordPress