专栏首页李才哥css应知应会 第五集
原创

css应知应会 第五集

1、定位

1、相对定位

位置微调

2、绝对定位

1、特点

1、脱离文档流

2、相对于离他最近的 已定位的 祖先元素 来实现位置初始化

3、如果元素不存在已定位的祖先元素的话,则相对于body去实现位置初始化

2、语法

属性:position

取值:absolute

3、注意

1、绝对定位的元素全部都会变为块级元素

2、margin,在正常情况下,auto值会失效

非正常情况下,auto对上下左右有有效

绝对定位的时候,将left/top/right/bottom 全部都都设置为0,配合 margin:auto

3、堆叠顺序

1、注意

堆叠顺序只对已定位元素有效

2、语法

属性:z-index

取值:

无单位的数值,数字越大越靠上

默认都为 0

如果z-index相同的情况下,那么就后来者居上

4、固定定位

1、what

让元素固定在网页的可视化区域中,不会随着滚动条而发生可视化的位置改变

2、语法

属性:position

取值:fixed

配合 偏移属性 实现位置的定位和更改

3、注意

1、固定定位元素会脱离文档流

2、固定定位的元素会变成块级元素

3、固定定位的元素永远都是相对于body来实现位置的定位

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我碰到的那些面试题js及es6(1)

    es6是一个新的标准,它包含了许多新的语言特性和库,是JS最实质性的一次升级。比如箭头函数、字符串模板、generators(生成器)、async/await、...

    李才哥
  • css应知应会 第四集

    3、当父元素中显示不下所有的已浮动子元素的话,那么最后一个将换行,依次类推。但有可能会被卡住

    李才哥
  • JavaScript秘密笔记 第四集

    何时: 后续循环依然希望执行时 其实,颠倒判断条件,就可避免使用continue

    李才哥
  • 定位(position)

    静态定位是所有元素的默认定位方式,当position属性的取值为static时,可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置...

    星辰_大海
  • Web自动化必会「Web基础、元素定位、元素操作、Selenium运行原理、项目实战+框架」

    Dom 对象里面涉及元素定位以及对元素的修改。因为对元素操作当中涉及的一些 js 操作,js 基本语法要会用。得要掌握前端的基本用法。为什么要元素定位?因为找到...

    清菡
  • Java_数据交换_Jackson_用法入门

    shirayner
  • Appium移动端自动化测试--控件定位方法

    DOM:Document Object Model文档对象模型 DOM应用:最早应用于HTML和Javascript的交互。界面结构话描述,常见的格式为HTML...

    软测小生
  • Yii框架核心组件类实例详解

    CComponent类为YII框架的基于组件和事件驱动编程提供了基础,YII框架中的大部分类都将CComponent类作为基类。

    砸漏
  • 程序员修仙之路--把用户访问记录优化到极致

    还记得菜菜不久之前设计的用户空间吗?没看过的同学请进传送门=》设计高性能访客记录系统

    架构师修行之路
  • Leetcode打卡 | No.26 删除排序数组中的重复项

    欢迎和小詹一起定期刷leetcode,每周一和周五更新一题,每一题都吃透,欢迎一题多解,寻找最优解!这个记录帖哪怕只有一个读者,小詹也会坚持刷下去的!

    小小詹同学

扫码关注云+社区

领取腾讯云代金券