How to absolutely position a button in a new line using CSS
CSS How to Absolutely Position a Button on a New Line
If you want to control the position of an element on a web page, we must utilize the CSS position property. Properties that define an element’s position within a document are essential: top, left, bottom, and right. Position is a shorthand property that can be used to set all four.
The possible values for the position property are as follows.
- Static – The element is positioned according to the natural flow of the document. Changing the top, right, bottom, left or z-index properties will not make any difference. This is the default setting.
-
Relative – The element is placed according to the natural flow of the document, offset from itself by the top, right, bottom, and left values. The space allocated to the element in the page layout is the same as if it were statically positioned, because the offset has no effect on the positioning of any other elements.
When z-index is not auto, this value establishes a new stacking context. How it affects table-*-group, row, column, cell, and table-caption elements is undefined.
- Absolute – The element is removed from the typical document flow, and no space is allocated for it in the page layout. It is placed in relation to that ancestor, if any; if not, in relation to the first containing block. The top, right, bottom, and left values define its final position.
When z-index is not auto, this value establishes a new stacking context. Absolute positioning prevents a box’s margins from collapsing with other margins.
- Fixed – The element is removed from the typical document flow; no space is reserved for it in the page layout. Unless one of its ancestors has its transform, perspective, or filter property set to none (see the CSS Transforms specification), or has its transform property set to transform, in which case that ancestor acts as the containing block, and it is positioned relative to the initial containing block established by the viewport. (Note that differences in perspective and filters between browsers may result in bounding blocks.) The top, right, bottom, and left values define its final position.
-
Sticky – The element is positioned according to the natural flow of the document, offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The positions of other elements are not affected by the offsets.
A new stacking context is always created with this value. It should be noted that a sticky element “sticks” to the nearest ancestor that has a “scroll mechanism” (produced when overflow is hidden, scrolled, auto, or overlayed), even if that ancestor is not the nearest ancestor that actually scrolls.
Relatively and Absolutely Positioned Elements
A relatively positioned element is one with “relative” as its calculated position, while an absolutely positioned element is one with “absolute” or “fixed” as its calculated position.
Relative Positioning Example
The following is a code example using relative positioning.
<!DOCTYPE html>
<html>
<head>
<style>
.relativePositioning {
position: relative;
left: 50px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>Using relative positioning in CSS</h2>
<p>This is a sample paragraph onto which relative positioning is being applied.</p>
<div class="relativePositioning">This part of the content has position : relative</div>
</body>
</html>
Absolute Positioning Example
Below is a sample code using absolute positioning.
<!DOCTYPE html>
<html>
<head>
<style>
.relativePositioning {
position: relative;
width: 500px;
height: 250px;
border: 2px solid red;
}
.absolutePositioning {
position: absolute;
top: 100px;
right: 0;
width: 300px;
height: 150px;
border: 2px solid red;
}
</style>
</head>
<body>
<h2>Example of using absolute positioning</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, possimus.</p>
<div class="relativePositioning">
This is the container element with position : relative
<div class="absolutePositioning">This is an example of absolute positioning</div>
</div>
</body>
</html>
Rendering Buttons in a New Row Using Absolute Positioning
Now that we understand how positioning works and how to use absolute positioning in CSS, we’ll apply our knowledge to solve the problem at hand.
Example
Below is an example of using absolute positioning in CSS to render buttons in a new row.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<style>
.outerBox {
position: relative;
}
.btn-pri {
color: #fff;
padding: 0.5px 7% 0.5px 5px;
height: 45px;
display: inline-block;
cursor: pointer;
background: green;
border: 2px solid #ccc;
}
.btn-txt {
margin-top: 6px;
margin-bottom: 6px;
}
.btn-pri-2 {
position: absolute;
left: 1px;
top: 53px;
} </style>
<body>
<div class="outerBox">
<h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
<h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
</div>
</body>
</html>
Conclusion
Finally, absolutely positioned elements allow you to render a button in a new row by specifying its exact location on the page. This can be achieved by setting the element’s “position” property to “absolute,” then providing values for the top, left, right, or bottom properties to indicate where you want it positioned. If used properly, absolute positioning can help create neat layouts with minimal effort.