CSS <integer> Data Type


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.


property: <integer>;


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


<div class="test1">-1</div> 
<div class="test2">3</div>
<div class="test3">2</div>
<div class="test4">1</div>
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; 

Browser Support

Explorer Edge Chrome Firefox Opera Safari
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung

Last updated by CSSPortal on: 9th December 2019