Home > Article > Web Front-end > How to position absolutely render button in new row?
How to position absolutely render button in new row?
- 王林forward
- 2023-09-02 17:53:021430browse
If you wish to control how an element is positioned within a web page, we must use the position CSS property. The properties that define the position of the element in the document are essential, its top, left, bottom and right properties and position is a shorthand property that can be used to set all four properties.
The following specifies the possible values we can use with the location attribute -
Static - Elements are placed according to the natural flow of the document. There is no difference in top, right, bottom, left, or z-index properties. This is the default option.
-
Relative - The element is placed according to the natural flow of the document, and its offset relative to itself is determined by the values of top, right, bottom, and left. The space allocated to an element in the page layout is the same as when the position is static, because the offset has no effect on the position of any other element.
When the value of z-index is not auto, this value will establish a new stack context. How it affects elements of table-*-groups, rows, columns, cells, and table-caption is undefined.
-
Absolute - The element has been removed from the typical document flow and no space is left for it in the page layout. If so, associate it with that ancestor; if not, place it relative to the first containing block. The top, right, bottom and left values define its final position.
When the value of z-index is not auto, this value will establish a new stack context. Absolute positioning prevents the box's margins from overlapping other margins.
Fixed - The element has been removed from the typical document flow and there is no room for it in the page layout. Unless one of its ancestors has the transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), or has the will-change property set to transform, in which case the ancestor acts as a containing block. It is positioned relative to the initial containing block established by the viewport. (Note that viewing angle and filter differences between browsers may result in closed blocks.) The top, right, bottom, and left values define its final position.
-
Sticky - Elements are positioned according to the natural flow of the document and based on the values of top, right, bottom and left, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements. The position of other elements is not affected by the offset.
New stack context is always created with this value. It should be noted that sticky elements "stick" to the nearest ancestor that has a "scrolling mechanism" (produced when overflow is hidden, scrolled, auto, or overridden), even if that ancestor is not the true nearest ancestor. scroll.
Relative and absolutely positioned elements
Relatively positioned elements refer to elements that use "relative" as their calculated position, while absolutely positioned elements refer to elements that use "absolute" or "fixed" as their calculated position.
Relative positioning example
The following is a sample code 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
The following 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>
Use absolute positioning to render buttons in new lines
Now we understand how positioning works and how to use absolute positioning in CSS. We will apply our knowledge to solve the problem at hand.
Example
Here is an example of using absolute positioning in CSS to render a button 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">
<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>
in conclusion
To summarize, positioned elements definitely allow you to render buttons in a new row by specifying their exact location on the page. This can be done by setting the element's "position" property to "absolute" and then providing a value for the top, left, right, or bottom property to indicate the exact position you want it to be placed. If used correctly, absolute positioning can help you create a clean layout with minimal effort.
The above is the detailed content of How to position absolutely render button in new row?. For more information, please follow other related articles on the PHP Chinese website!