(摘自张鑫旭老师的课程内容)

position: absolute

1. 定位元素（关闭按钮etc）：dom顺序保持正确，然后根据absolute的位置跟随性（脱离文档流但是位置不变）和margin值进行定位

在img和文字之间用<!--  -->注释掉多余的空格

2. 当absolute定位后，left:0  right:0(百分百拉伸)，尺寸限制（eg: width: 50%），宽度最终为50%；但再设置margin: auto,元素就会水平居中

　　　　　　　　(IE8+ 支持)

z-index

　　　　　　　(不依赖z-index创建层叠上下文)

① display: flex 要与子元素设置正数的 z-index 配合使用才会起作用；

② position: fixed 在Chrome等blink/webkit内核浏览器或者移动端中起作用；

css 底层知识点的更多相关文章

  1. HTML&&CSS基础知识点整理

    HTML&&CSS基础知识点整理 一.WEB标准:一系列标准的集合 1. 结构(Structure):html 语言:XHTML[可扩展超文本标识语言]和XML[可扩展标记语言] 2. ...

  2. HTML和CSS的知识点

    HTML的知识点 HTML的结构: <!DOCTYPE html>: 文档类型性为HTML5文件 文档声明:在HTML的文档中必不可少,且必须在文档的第一行 文档声明的编码格式<!- ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  5. css入门知识点整理

    css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...

  6. CSS基本知识点——带你走进CSS的新世界

    CSS基本知识点 我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解: (如果没有学习HTML,请参考之前文章:HTML知识点概括--一篇文章带你完全掌握HTML& ...

  7. [总结]WEB前端开发常用的CSS/CSS3知识点

    css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...

  8. css相关知识点

    一.CSS的引入方式 1.1 css的介绍 HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  9. 关于CSS重要知识点(1)

    1. 盒子模型 CSS处理网页内容时,会把每一个元素"放在"一个盒子里,也就是所谓的盒子模型. 盒子模型包括4部分:内容,内边距(padding),边框(border)和外边距(m ...

随机推荐

  1. The History of spring

    Spring的出现  Spring最早出现对早期J2EE规范复杂性的回应 .虽然有些人一直认为Java EE和Spring处于竞争中,但Spring实际上是对Java EE的补充.Spring编程模型 ...

  2. pam密码策略

    PAM 的使用历史 PAM 是关注如何为服务验证用户的 API.在使用 PAM 之前,诸如 login(和 rlogin.telnet.rsh)之类的应用程序在 /etc/passwd 中查找用户名, ...

  3. Autowired(required=true)

    问题原因 没有实现类的接口上添加了@Autowired注解 问题解决 删掉@Autowired注解 bug详情 Description: Field userDAO in com.crab.servi ...

  4. vue v-if:"TypeError: Cannot read property 'length' of undefined"

    在使用v-if判断一个数组大小为0时,会出现 length 是undefined的错误:[Vue warn]: Error in render: "TypeError: Cannot rea ...

  5. bug日记之---------js中调用另一个js中的有ajax的方法, 返回值为undefind

    今天做一个OCR授权的需求, 需要开发一个OCR弹框, 让用户选择是否授权给第三方识别公司(旷世科技)保存和识别用户个人信息, 照片等. 其中用到了在一个js的方法中调用另外一个js的方法, 其中有一 ...

  6. Lintcode489-Convert Array List to Linked List-Easy

    489. Convert Array List to Linked List Convert an array list to a linked list. Example Example 1: In ...

  7. Pandas 基础(16) - Holidays

    这节依然是关于时间方面的知识.上一节学习了如何获取日期序列的函数, 以及通过一些基本的参数设置可以使时间序列跳过休息日等.这一节, 将要深入学习这个点, 做更自定义的设计. 通过上一节的学习, 我们知 ...

  8. poj1151 Atlantis （线段树+扫描线+离散化）

    有点难,扫描线易懂,离散化然后线段树处理有点不太好理解. 因为这里是一个区间,所有在线段树中更新时,必须是一个长度大于1的区间才是有效的,比如[l,l]这是一根线段,而不是区间了. AC代码 #inc ...

  9. vue 学习笔记（二）

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  10. 蚂蚁风险大脑亮相ATEC城市峰会：为数字经济时代做好“安全守护”

    2019年1月4日,以“数字金融新原力(The New Force of Digital Finance)”为主题的蚂蚁金服ATEC城市峰会在上海隆重举行.大会聚焦金融数字化转型,分享新技术的发展趋势 ...