position:规定元素的定位类型
主要有以下三种类型:
fixed:生成绝对定位元素,相对于浏览器窗口而言的,即不管浏览器窗口大小如何变化,元素始终位于浏览器的固定位置。
不管是否有父div,它的位置始终是浏览器的绝对位置
元素位置可以通过:top,bottom,left,right来定位
css代码
div{ height: 500px; 500px; background-color: #303a40; } p{ position: fixed; top:30px; right: 30px; }
html代码
<head> <meta charset="UTF-8"> <title>CSS测试</title> <link rel="stylesheet" type="text/css" href="ctest.css"> </head> <body> <body> <div > <p>绝对位置</p> </div> </body> </body>
效果图:
absolute:生成绝对定位元素,相对于static以外的第一个父元素,
元素位置可以通过:top,bottom,left,right来定位
css代码
div{ height: 500px; 500px; background-color: #303a40; } p{ position: absolute; top:30px; right: 30px; }
html代码同上
效果图:
relative:生成相对定位元素,其是相对于其正常位置而言的
属性:
left 30px:相对于正常位置左侧填充30px;
top 30px:相对于正常位置上侧填充30px;
css代码:
div{ height: 500px; 500px; background-color: #303a40; } p{ position: relative; left:600px; top:100px; }
html代码
<head> <meta charset="UTF-8"> <title>CSS测试</title> <link rel="stylesheet" type="text/css" href="ctest.css"> </head> <body> <body> <div > <p>相对位置</p> </div> <div style="height: 1000px;background-color: #656565"></div> </body> </body>
效果图:
现象:
当absolute遇见了relativ会怎么样?
css代码:
div{ height: 500px; 500px; background-color: #303a40; position: relative; left:100px; } p{ position: absolute; right: 20px; top:20px; }
html代码
<head> <meta charset="UTF-8"> <title>CSS测试</title> <link rel="stylesheet" type="text/css" href="ctest.css"> </head> <body> <body> <div > <p>绝对位置</p> </div> <div style="height: 1000px;background-color: #656565"></div> </body> </body>
效果图