CSSposition属性
基本html文本
1. position-static
#part1{
width: 200px;
height: 200px;
background: gold;
}
#part2{
position: relative;
top: 200px;
left: 200px;
background: violet;
}
不论top和left后面的参数怎么变粉色的方块始终都不会动。
粉色方块始终都在原始的位置
——————————————————————————————————————–分割线——————————————————————————————————————————————————
2. position-relative
初始位置
#part1{
width: 200px;
height: 200px;
background: gold;
}
#prat2{
position: relative;
top: 0px;
left: 0px;
background: violet;
}
——————————————————————————————————————分割线——————————————————————————————————————————————————–
第一次移动
top: 200px;
left: 0px;
——————————————————————————————————————分割线——————————————————————————————————————————————————–
第二次移动
top: 0px;
left: 200px;
——————————————————————————————————————————–分割线——————————————————————————————————————————————
第三次移动
top: 200px;
left: 200px;
———————————————————————————————————————–分割线—————————————————————————————————————————————————
3. position-absolute
初始位置
#prat2{
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
background: violet;
}
top和left都为0px时，粉色方块在页面的最左上角。
———————————————————————————————————-分割线—————————————————————————————————————————————————————-
第一次移动
top: 200px;
left: 200px;
——————————————————————————————————————-分割线——————————————————————————————————————————————————-
4. position-fixed
初始位置
#prat2{
position: fixed;
top: 0px;
left: 0px;
width: 200px;
width: 200px;
background: violet;
}
———————————————————————————————————————————分割线—————————————————————————————————————————————–
移动
top: 200px;
left: 200px;
———————————————————————————————————————-分割线—————————————————————————————————————————————————-
根据以上操作和结果得出结论如下：
1、 static是默认值没有定位，元素忽略top、bottom、left、right、z-index声明。
2、 relative生成相对定位的元素，也就是说top或者left(或者bottom，right)的改变是相对其自己的位置进行定位的.
3、 absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
4、 fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
5、其实absolute和fixed在浏览器页面没有滚动条的情况下的位置移动是没有差异的(如上图 absolute和 fixed相对于初始位置的移动的图)。
在有滚动条的情况下，fixed定位不会随滚动条而移动。而absolute则会随滚动条移动。
fixed固定的画面犹如网页上那些顽强的小广告！