Home >Web Front-end >CSS Tutorial >How to arrange text lower in css
Method: 1. Add the "position:relative" style to the parent element of the text element to set it as an absolute positioning style; 2. Add the "position:absolute;bottom:0" style to the text element to position the text The element is set to a relative positioning style and the text elements are arranged lower.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to arrange text lower in css
In css, use the position attribute to set the text element to an absolute positioning style. The parent element is set to relative positioning style.
Use the bottom attribute to specify the bottom edge of the element. This property defines the offset between the bottom margin boundary of the positioned element and the bottom boundary of its containing block.
The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width:300px;
height:300px;
border:1px solid #000;
position:relative;
}
p{
position:absolute;
bottom:0;
padding:0;
margin:0;
}
</style>
</head>
<body>
<div>
<p>文字靠下</p>
</div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to arrange text lower in css. For more information, please follow other related articles on the PHP Chinese website!