数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法学CSS 中的相对定位工作原理
我们可以将 CSS 中元素的定位定义为“相对”，它会正常渲染元素。定位方法为相对的元素由 CSS 定位属性（left、right、top 和 bottom）定位。
示例
我们来看一个 CSS 相对定位方法的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
}
div:first-child {
position: relative;
top:20px;
background-color: orange;
text-align: center;
}
</style>
</head>
<body>
<div>PostgreSQL</div>
<p>PostgreSQL is a powerful, open source object-relational database system.
It has more than 15 years of active development.................</p>
<div></div>
</body>
</html>输出
以下是上述代码的输出 −
示例
我们再来看一个定位方法的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px double #a43356;
margin: 5px;
padding: 5px;
}
#d1 {
position: relative;
height: 10em;
}
#d2 {
position: absolute;
width: 20%;
bottom: 10px; /*relative to parent d1*/
}
#d3 {
position: fixed;
width: 30%;
top:10em; /*relative to viewport*/
}
</style>
</head>
<body>
<div id="d1">PhoneGap is a software development framework by Adobe System, which is used to develop mobile applications. To develop apps using PhoneGap, the developer does not require to have knowledge of mobile programming language but only web-development languages like, HTML, CSS, and JScript.<mark>relative</mark>
<div id="d2"><mark>absolute</mark></div>
<div id="d3"><mark>fixed</mark></div>
</div>
</body>
</html>输出
会生成以下输出：−
更新日期：2020 年 1 月 7 日
477 次浏览
广告