How to position absolute rendering the button in a new line ?

Last Updated : 10 May, 2021

The position CSS property sets how an element is positioned in a document. Absolute positioning allows you to place your element where you want. The positioning is done relative to the first absolutely positioned element. The element we position absolute will be removed from the normal flow of the document and no space is created in the page for the element.

Now if you have a button and want to position it in a new line using absolute positioning. Make the button element absolute and set the parent element as relative(it is relative by default) then using top, left, right, the bottom you can place your element wherever you want.

Example: We will place two-button inside a div and make the second div position absolute then by using top and left we will position it in a new line. Create an index.html file with the following code.

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0"> 
</head> 
<style> 
  .box { 
    position: relative; 
  } 
  
  .btn-primary { 
    color: #fff; 
    padding: 0px 7% 0px 5px; 
    height: 45px; 
    display: inline-block; 
    cursor: pointer; 
    background-image: linear-gradient(green, lightgreen); 
    border: 1px solid #ccc; 
  } 
  
  .btn-text { 
    margin-top: 5px; 
    margin-bottom: 5px; 
  } 
  
  .btn-primary-2 { 
    position: absolute; 
    left: 0px; 
    top: 52px; 
  } 
</style> 
  
<body> 
  <div class="box"> 
    <a class="btn-primary btn-primary-1"> 
      <h5 class="btn-text">GFG</h5> 
    </a> 
    <a class="btn-primary btn-primary-2"> 
      <h5 class="btn-text">GFG-2</h5> 
    </a> 
  </div> 
</body> 
  
</html>