Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to position absolute rendering the button in a new line?
If you wish to control how an element is to be positioned in a web page, we have to make use of the position CSS property. The properties that define the position of an element in document are essential, its top, left, bottom, and right properties and position is a shorthand property that can be used to set all four of these.
The possible values that we can use with position property are specified below −
Static − The element is placed in accordance with the document's natural flow. No difference is made by the top, right, bottom, left, or z-index attributes. This is the preset option.
Relative − The element is placed in accordance with the document's natural flow, and its offset from itself is determined by the values of top, right, bottom, and left. The space allotted for the element in the page layout is the same as it would be if position were static because the offset has no effect on the positions of any other elements.
When the value of the z-index is not auto, this value establishes a new stacking context. How it is going to affect the elements of table-*-group, row, column, cell, and table-caption is still not defined.
Absolute − The element is eliminated from the typical document flow, and no room is made in the page layout for it. If there is one, it is placed in relation to that ancestor; if not, it is placed in relation to the first contained block. The top, right, bottom, and left values define its final location.
When the value of the z-index is not auto, this value establishes a new stacking context. Absolute positioning prevents the margins of boxes from collapsing with other margins.
Fixed − The element is eliminated from the typical document flow, and no room is made in the page layout for it. Unless one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec) or the will-change property is set to transform, in which case that ancestor acts as the containing block, it is positioned relative to the initial containing block established by the viewport. (Note that perspective and filter differences between browsers might lead to the generation of enclosing blocks.) The top, right, bottom, and left values define its final location.
Sticky − The element is positioned in accordance with the document's natural flow, and depending on the values of top, right, bottom, and left, it is then offset in relation to its nearest scrolling ancestor and contained block (nearest block-level ancestor), including table-related elements. Other elements' positions are unaffected by the offset.
A new stacking context is always created by this value. It should be noted that a sticky element "sticks" to the closest ancestor that has a "scrolling mechanism" (produced when overflow is hidden, scrolled, auto, or overlay), even if that ancestor isn't the closest one that is really scrolling.
Relatively and Absolutely Positioned Elements
A relatively positioned element is one that has “relative” as its computed position, whereas the absolutely positioned element is one that has either “absolute” or “fixed” as its computed position.
Example of Relative Positioning
Below is an example code that uses 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>
Example of Absolute Positioning
Below is an example code that uses 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>
Using absolute positioning to render buttons in new line
Now that we understand how positioning works and how we can use absolute positioning in CSS. We will apply our knowledge to solve the problem at hand.
Example
Below is an example of using absolute positioning in CSS to render buttons in new lines.
<!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">
<a class="btn-pri btn-pri-1">
<h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
</a>
<a class="btn-pri btn-pri-2">
<h5 class="btn-txt">Lorem ipsum dolor sit amet.</h5>
</a>
</div>
</body>
</html>
Conclusion
To conclude, Positioning an element absolutely allows you to render the button in a new line by specifying the exact position of it on your page. This can be done by setting the "position" property of the element to "absolute", and then providing values for top, left, right or bottom properties that indicate where exactly you want to place it. When used correctly, absolute positioning can help create neat layouts with minimal effort.
954 Views
To Continue Learning Please Login