静态定位是默认值,就是之前认识的标准流。 代码:postion:static 静态定位不能通过方向偏移值来改变。
自恋型定位,相对于自己之前的位置进行移动。 代码:postion:relative
应用场景 :配合绝对定位组cp(子绝父相),用于小范围的移动。
拼爹型定位,相对于非静态定位的父元素进行移动。
代码:position:absolute
应用场景 :配合相对定位组CP(子绝父相)
绝对定位相对于谁移动?
相对于浏览器窗口进行定位,脱离原来的文档流。
代码:position:fixed
含义: 子元素用绝对定位,父元素用相对定位。
应用场景: 让子元素相对于父元素进行自由移动。
好处: 父元素是相对定位,对网页布局影响最小。
子绝父绝特殊场景:
场景: 在使用子绝父相的时候,发现父元素已经有相对定位了,此时直接子绝即可!
原因: 父元素已经有定位已经满足要求,如果盲目修改父元素定位方式,可能会影响之前写好的布局。
水平方向:
垂直方向:
基本写法:
.blue {
/* 设置定位方式 */
position: absolute;
top: 150px;
left: 150px;
background-color: blue;
}