css之position
position:规定元素的定位类型
主要有以下三种类型：
fixed:生成绝对定位元素，相对于浏览器窗口而言的，即不管浏览器窗口大小如何变化，元素始终位于浏览器的固定位置。
不管是否有父div，它的位置始终是浏览器的绝对位置
元素位置可以通过：top,bottom,left,right来定位
css代码
div{
height: 500px;
width: 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;
width: 500px;
background-color: #303a40;
}
p{
position: absolute;
top:30px;
right: 30px;
}
html代码同上
效果图：
relative:生成相对定位元素，其是相对于其正常位置而言的
属性：
left 30px:相对于正常位置左侧填充30px;
top 30px:相对于正常位置上侧填充30px;
css代码：
div{
height: 500px;
width: 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;
width: 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>
效果图
