Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 10 May, 2021
Geek Week

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>

Output:

Output

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :