前端开发：深入理解定位技术-CSDN博客

本文链接：https://blog.csdn.net/QAmazing/article/details/99654883

本文是关于前端学习的第9天内容，主要探讨了定位技术，包括元素定位的属性如边偏移（, , , ）、定位模式（静态、相对、绝对、固定），以及叠放次序的概念。此外，还介绍了包含块的重要性，它是绝对定位的参照物，并讲解了透明写法和如何实现滚动字幕的效果。" 122769105,11801128,Android与Flutter混合开发实战：高效跳转与通信,"['移动开发', 'Android', 'Flutter']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第9天

1.定位(`position`)

1.1元素定位的属性

边偏移
- top:相对于父元素上边线距离。
- bottom:相对于父元素下边线的距离。
- left:相对于父元素左边线的距离。
- right:相对于父元素右边线的距离。
定位模式
- static：静态定位。（默认值）
- relative:相对定位，相对自身位置定位，原位置依然占有空间。
- absolute:绝对定位，相对父元素定位，脱离标准量，原位置不占有空间。根据最近有定位的父级及以上元素定位，若都没有定位，则相对于HTML定位。
- fixed:固定定位，以浏览器窗口为标准定位。===>IE6等低版本浏览器不支持。
定位用法
- 子绝父相

2.叠放次序(`z-index`)

语法:

div{
    positive:absolute;
    z-index:1;
    /* z-index值越大，显示在越上边   默认值是0*/
}

3.包含块

说明：含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考；

4.透明写法

语法：

div{
    /* IE浏览器写 */
    filter:alpha(opacity=value)；/* 取值为0-100 */
    /* 兼容其他浏览器写法 */
     opacity:0.value;/*取值为0.0-1.0
    /
}

5.滚动字幕 `marquee`

语法:

 <marquee 
behavior（行为）="scroll(滚动)/alternate（晃动）"direction（方向）="up(从下向上)/down（从上向下）/left（从右向左）/right（从左向右）" 
scrollamount（滚动速度）="value"height="value(上下滚动范围)"width=""(左右滚动范围)>
内容
</marquee>