Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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

CSS Web Development Front End Technology

The CSS position property controls how elements are positioned within a webpage. When using position: absolute, elements are removed from the normal document flow, allowing precise placement and forcing subsequent elements to appear on new lines.

Syntax

selector {
    position: absolute;
    top: value;
    left: value;
    right: value;
    bottom: value;
}

Position Property Values

Value Description
static Default positioning according to document flow
relative Positioned relative to its normal position
absolute Positioned relative to nearest positioned ancestor
fixed Positioned relative to the viewport
sticky Toggles between relative and fixed based on scroll

Example: Relative vs Absolute Positioning

This example demonstrates the difference between relative and absolute positioning 

<!DOCTYPE html>
<html>
<head>
<style>
    .container {
        position: relative;
        width: 400px;
        height: 200px;
        border: 2px solid #333;
        background-color: #f9f9f9;
        padding: 20px;
    }
    
    .relative-element {
        position: relative;
        left: 50px;
        top: 20px;
        background-color: #4CAF50;
        color: white;
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .absolute-element {
        position: absolute;
        top: 80px;
        right: 20px;
        background-color: #2196F3;
        color: white;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="container">
        Container with position: relative
        <div class="relative-element">Relative positioned</div>
        <div class="absolute-element">Absolute positioned</div>
    </div>
</body>
</html>

A container box with a green relatively positioned element (offset 50px left, 20px down) and a blue absolutely positioned element in the top-right corner.

Example: Positioning Buttons in New Lines with Absolute

Here's how to use absolute positioning to place buttons on separate lines with precise control 

<!DOCTYPE html>
<html>
<head>
<style>
    .button-container {
        position: relative;
        width: 100%;
        height: 150px;
        background-color: #f0f0f0;
        padding: 20px;
    }
    
    .btn {
        position: absolute;
        background-color: #4CAF50;
        color: white;
        padding: 12px 24px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
        min-width: 150px;
    }
    
    .btn:hover {
        background-color: #45a049;
    }
    
    .btn-first {
        top: 20px;
        left: 20px;
    }
    
    .btn-second {
        top: 70px;
        left: 20px;
    }
    
    .btn-third {
        top: 120px;
        left: 20px;
    }
</style>
</head>
<body>
    <div class="button-container">
        <button class="btn btn-first">First Button</button>
        <button class="btn btn-second">Second Button</button>
        <button class="btn btn-third">Third Button</button>
    </div>
</body>
</html>

Three green buttons stacked vertically in separate lines, each positioned 50px apart vertically and aligned to the left edge of the container.

Key Points

  • Absolute positioning removes elements from normal document flow
  • Elements are positioned relative to their nearest positioned ancestor
  • Use top, left, right, and bottom properties for precise placement
  • Parent container should have position: relative to serve as reference point

Conclusion

Absolute positioning provides precise control over element placement, effectively rendering buttons on new lines by removing them from normal flow. This technique is ideal when you need exact positioning control over your layout elements.

Updated on: 2026-03-15T16:15:53+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements