一、定位三种方式
1、固定定位
position：fixed；
left / right / top / bottom：值；
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
<style>
div{
width: 100px;
height: 100px;
border: 1px solid red;
position: fixed;
top: 200px;
left: 500px;
}
</style>
<body>
<div></div>
</body>
2、相对定位
position：relative；
left / right / top / bottom：值；
生成相对定位的元素，相对于其正常位置进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
<style>
div{
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
left: 300px;
top: 200px;
}
</style>
<body>
<div></div>
</body>3、绝对定位
position：absolute；
left / right / top / bottom：值；
生成绝对定位的元素，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
<style>}
p{
width: 50px;
height: 50px;
border: 1px solid blue;
position: absolute;
right: 100px;
bottom: 0;
}
</style>
<body>
<p></p>
</body>注意：会参考其父类元素，由内向外第一个含有定位的元素，如果没有，就会参考body进行定位。
二、两个判断
1、该元素定位后，在网页中是否还有位置？
固定定位 fixed ：没有了位置
相对定位 relative ：依旧有位置
绝对定位 absolute ： 没有了位置
2、该元素定位相对于谁进行偏移？
固定定位 fixed ：参考body
相对定位 relative ：参考自己原先的位置
绝对定位 absolute ： 参考父类层级，由内向外第一个含有定位的元素，如果没有，就参考body。
三、层级
z-index：值；
表示层级高低问题
<style>
div{
width: 300px;
height: 300px;
background-color: red;
position: fixed;
top: 200px;
left: 300px;
z-index: 10;
}
p{
width: 100px;
height: 100px;
background-color: blue;
position: fixed;
top: 300px;
left: 400px;
z-index: 1;
}
</style>
<body>
<div></div>
<p></p>
</body>
注意：当div元素的层级高于p元素时，p元素就会被div元素所遮挡，即div元素在p元素上面，视觉上看不到p元素。
29万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
