- 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 - Right
CSS right property controls the horizontal position of an element on a web page. It only affects elements that have been positioned using the position property. It does not affect elements that are not positioned.
The right property has different effects depending on the position of the element.
absolute or fixed − Specifies the distance of an element from the right of the inner border of its containing block.
relative − Specifies the distance the right edge of an element's shifted to the left of its starting point.
static − It has no effect on the position of an element.
Sticky − It determines the rightmost edge of the sticky-constraint rectangle.
Possible Values
auto − Default value. The browser will determine the right edge position of the element based on its width.
length − It can specify a positive, negative, or null value.
percentage − It can specify the percentage of the container's Width.
Applies to
All the HTML positioned elements.
DOM Syntax
object.style.right = "2px";
CSS right - With Absolute Position
The following example shows how to use the position: absolute property and right property to position an element to the right of its parent element −
<html> <head> <style> .box { background-color: #f2c3ee; color: #1144ec; font-weight: bold; } .absolute-box { position: absolute; width: 130px; height: 60px; padding: 2px; border: 2px solid #000000; background-color: #bbedbb; color: #e50c0c; border-radius: 5px; } .right { right: 0; } .right-px { right: 60px; } .right-per { right: 30%; } .right-em { right: 2em; } .right-auto { right: auto; } </style> </head> <body> <div class="box"> <div class="absolute-box right"> Absolute positioning with 0 right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. <div class="absolute-box right-px"> Absolute positioning with 60px right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. <div class="absolute-box right-per"> Absolute positioning with 30% right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <div class="absolute-box right-em"> Absolute positioning with 2em right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. <div class="absolute-box right-auto"> Absolute positioning with auto right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages. </div> </body> </html>
CSS right - With Fixed Position
The following example demonstrates how to use the position: fixed property and the right property to position an element to the right edge of the viewport and keep it in the same place even when the page is scrolled −
<html> <head> <style> .box { background-color: #f2c3ee; color: #1144ec; font-weight: bold; } .fixed-box { position: fixed; width: 130px; height: 60px; padding: 2px; border: 2px solid #000000; background-color: #bbedbb; color: #e50c0c; border-radius: 5px; } .right { right: 0; } .right-px { right: 60px; } .right-per { right: 30%; } .right-em { right: 2em; } .right-auto { right: auto; } </style> </head> <body> <div class="box"> <div class="fixed-box right"> Fixed positioning with 0 right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry. <div class="fixed-box right-px"> Fixed positioning with 60px right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry. <div class="fixed-box right-per"> Fixed positioning with 30% right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry. <div class="fixed-box right-em"> Fixed positioning with 2em right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. <div class="fixed-box right-auto"> Fixed positioning with auto right margin. </div> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div> </body> </html>
CSS right - With Relative Position
The following example demonstrates how to use the position: relative property and the right property to move an element from the right edge to the left of its normal position −
<html> <head> <style> .box { background-color: #f2c3ee; color: #1144ec; font-weight: bold; margin-left:10%; } .relative-box { position: relative; width: 130px; height: 60px; padding: 2px; border: 2px solid #000000; background-color: #bbedbb; color: #e50c0c; border-radius: 5px; } .right { right: 0; } .right-px { right: 30px; } .right-per { right: 10%; } .right-em { right: 1em; } .right-auto { right: auto; } </style> </head> <body> <div class="box"> <div class="relative-box right"> Relative positioning with 0 right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="relative-box right-px"> Relative positioning with 30px right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="relative-box right-per"> Relative positioning with 10% right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="relative-box right-em"> Relative positioning with 1em right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="relative-box right-auto"> Relative positioning with auto right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </div> </body> </html>
CSS right - With Static Position
The following example demonstrates that the right property will have no effect on the positioning of an element if the position property is set to static −
<html> <head> <style> .box { background-color: #f2c3ee; color: #1144ec; font-weight: bold; } .static-box { position: static; width: 130px; height: 60px; padding: 2px; border: 2px solid #000000; background-color: #bbedbb; color: #e50c0c; border-radius: 5px; } .right { right: 0; } .right-px { right: 60px; } .right-per { right: 30%; } .right-em { right: 2em; } .right-auto { right: auto; } </style> </head> <body> <div class="box"> <div class="static-box right"> Static positioning with 0 right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="static-box right-px"> Static positioning with 60px right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="static-box right-per"> Static positioning with 30% right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="static-box right-em"> Static positioning with 2em right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="static-box right-auto"> Static positioning with auto right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </div> </body> </html>
CSS right - With Sticky Position
The following example demonstrates how to use the position: sticky and right property to create an element that sticks to the viewport when the user scrolls −
<html> <head> <style> .box { background-color: #f2c3ee; color: #1144ec; font-weight: bold; padding: 10px; } .sticky-container { position: relative; } .sticky-box { position: sticky; width: 130px; height: 60px; padding: 2px; border: 2px solid #000000; background-color: #bbedbb; color: #e50c0c; border-radius: 5px; top: 10px; } .right { right: 0; } .right-px { right: 60px; } .right-per { right: 30%; } .right-em { right: 2em; } .right-auto { right: auto; } </style> </head> <body> <div class="box"> <div class="sticky-container"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <div class="sticky-box right"> Sticky positioning with 0 right margin. </div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </div> </div> </body> </html>