- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - top Property
The top CSS property is used to specify the vertical position of an element relative to its containing element when the position property is set to absolute, fixed, relative, or sticky.
Note: The top property only works if the position property is set to a value other than static (which is the default value).
Based on the value of the position property, the effect of top property is determined.
Position Value | Bottom Property |
---|---|
absolute or fixed | Specifies the distance between element's top edge's outer margin and the inner border of the container's top edge. |
relative | Specifies the distance the element's top edge is moved below its normal position. |
sticky | Used to compute the sticky-constraint rectangle. |
static | No effect on the element's position. |
Both top and bottom values are respected, when both top and bottom values are specified, position is set to absolute or fixed , and height is either 100% or auto.
The top value takes precedence and the bottom value is ignored, when height is constrained or position is set to relative.
Possible Values
<length> − Can specify a negative, null or positive value.
<percentage> − Percentage of the container's height.
auto − Default value. Browser calculates the bottom position.
Applies To
All the HTML positioned element.
DOM Syntax
object.style.top = "20px";
CSS top - Absolute Position
Here is an example where we set position:absolute and different top property values (auto,percent,length) −
<html> <head> <style> div { position: absolute; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:absolute top:auto</div> <div class="percent">Position:absolute top:30%</div> <div class="length">Position:absolute top:3inches</div> </body> </html>
CSS top - Relative Position
Here is an example where position:relative and different top property values (auto,percent,length) −
<html> <head> <style> div { position: relative; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:relative top:auto</div> <div class="percent">Position:relative top:30%</div> <div class="length">Position:relative top:3inches</div> </body> </html>
CSS top - Fixed Position
Here is an example where we set position:fixed and different top property values (auto,percent,length) −
<html> <head> <style> div { position: fixed; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:fixed top:auto</div> <div class="percent">Position:fixed top:30%</div> <div class="length">Position:fixed top:3inches</div> </body> </html>
CSS top - Sticky Position
Here is an example where position:sticky and different top property values (auto,percent,length) −
<html> <head> <style> div { position: sticky; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { top:auto; background-color: yellow; } div.percent { top:30%; background-color: pink; } div.length { top:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:sticky top:auto</div> <div class="percent">Position:sticky top:30%</div> <div class="length">Position:sticky top:3inches</div> </body> </html>
CSS top - Static Position
Here is an example where position:static and different top property values (auto,percent,length) −
<html> <head> <style> div { position: static; height: 100px; border: 3px solid rgb(12, 5, 62); } div.auto { bottom:auto; background-color: yellow; } div.percent { bottom:30%; background-color: pink; } div.length { bottom:3in; background-color:transparent; } </style> </head> <body> <div class="auto">Position:static top:auto</div> <div class="percent">Position:static top:30%</div> <div class="length">Position:static top:3inches</div> </body> </html>
To Continue Learning Please Login
Login with Google