1.定位
(1)position定位属性;默认值是static,无定位。相对定位:相对于原来的位置来说的。绝对定位:相对于最近的一个被定位过的祖先元素标签
(2)定位示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>14定位示例</title> <style> * { margin: 0; padding: 0; } /*让标签定位在一个位置,距离网页的上面和左面各是多少像素的位置 */ .c1, .c2, .c3, .c4 { height: 150px; width: 150px; } .c1 { background-color: red; } /* 相对定位 */ .c2 { background-color: green; /*position: static; !* position属性就是定位相关的,默认值是static *!*/ position: relative; /* relative表示相对定位,相对于自己原先的位置 */ left: 400px; top: 150px; } .c3 { background-color: blue; } /* 绝对定位 */ .c4 { background-color: darkcyan; position: absolute; /* 绝对定位,相对与被定位过的父标签的位置 */ top: 150px; left: 400px; } </style> </head> <body> <div class="c1">C1</div> <div class="c2">C2</div> <div class="c3">C3</div> <div class="c2">CC2 <div class="c4">C4</div> </div> </body> </html>
2.fixed 固定定位(返回顶部按钮通常用这个做)
/* 固定定位,在界面中,位置不会变化*/
.fixed-test {
position: fixed;
right: 20px;
bottom: 20px;
background-color: blueviolet;
}
<div class="fixed-test">返回顶部</div>
原文:https://www.cnblogs.com/whylinux/p/10362153.html