Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  .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;
  <div class="box">
    <a class="btn-primary btn-primary-1">
      <h5 class="btn-text">GFG</h5>
    <a class="btn-primary btn-primary-2">
      <h5 class="btn-text">GFG-2</h5>



My Personal Notes arrow_drop_up
Last Updated : 10 May, 2021
Like Article
Save Article
Similar Reads
Related Tutorials