CSS <integer> Data Type

Description

The <integer> CSS data type represents a number without a decimal component. It is used to specify ordered or layered values, either positive or negative. Properties accepting integer values generally cannot be animated in a useful way because only discrete values are meaningful.

Syntax

property: <integer>;

Values

<integer>Consists of one or several decimal digits, 0 through 9 inclusive, optionally preceded by a single + or - sign.

Example

HTML

<div class="test1">-1</div> 

<div class="test2">3</div> 

<div class="test3">2</div> 

<div class="test4">1</div>

CSS

div {
   position: absolute; 
   width: 100px;
   height: 100px; 
   border: 1px solid black; 
   color: white;
}
.test1 {
   left: 15px; 
   top: 15px;
   background-color: red;
   z-index: -1; 
}
.test2 {
   left: 30px; 
   top: 35px;  
   background-color: blue;
   z-index: 3;  
}
.test3 {
   left: 45px; 
   top: 20px; 
   background-color: green; 
   text-align: right; 
   z-index: 2; 
} 
.test4 {
   left: 60px; 
   top: 60px; 
   background-color: sienna; 
   text-align: right; 
   z-index: 1; 
}

Result

Browser Support

Desktop

3	12	1	1	3.5	1

Tablets / Mobile

≤37	18	4	10.1	1	1.0

Last updated by CSSPortal on: 9th December 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu