静态定位
静态(static)定位是每个元素获取的默认值,没有什么特别的
相对定位 relative
相对于自身的偏移坐标(left/right/top/bottom)
HTML文档流
I am a basic block level element. My adjacent block level elements sit on new lines below me.
By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.
We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.
inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will wrap onto a new line if possible (like this one containing text), or just go on to a new line if not, much like this image will do:
绝对定位 absolute
相对于父容器的偏移坐标(left/right/top/bottom)
⚠️注意点
- 父元素不能是普通的静态(static)定位
- 页面上有其他fixed/absolute/sticky元素时，需要z-index控制显示顺序
HTML文档流
I am a basic block level element. My adjacent block level elements sit on new lines below me.
By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.
We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.
inline elements like this one and this one sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will wrap onto a new line if possible (like this one containing text), or just go on to a new line if not, much like this image will do:
固定定位 fixed
相对于整个浏览器(viewport)的偏移坐标(left/right/top/bottom)
需要注意的是，如果该div元素的父元素也设置了position属性值为fixed，那么该div元素将相对于其父元素进行定位，而不是相对于浏览器窗口进行定位。此时，该div元素的宽度也会相对于其父元素进行计算
⚠️注意点
- 需要指定元素的宽高(width/height)和位置(top/bottom/left/right),否则无法正常显示
- 页面上有其他fixed/absolute/sticky元素时，需要z-index控制显示顺序
sticky
相对于自己的偏移坐标(left/right/top/bottom) 当滚动到自己的位置时，触发sticky；当父容器的最底部离开显示区域时，退出sticky
⚠️注意点
- 需要指定元素的位置(top/bottom/left/right),否则无法生效
- 页面上有其他fixed/absolute/sticky元素时，需要z-index控制显示顺序
第一章节
第二章节
第三章节
第四章节
第五章节
