css定位:相对定位、绝对定位、固定定位的区别与特性

原文地址:http://www.qingzhouquanzi.com/106.html

css定位常用的有以下三种:

使用了定位的共同特性:

这三种定位可以设置四个值,但是通常只用到2个值就可以完成定位

如果只写了定位 没有设置偏移量,则元素位置都不会改变,默认值为原来的位置.

使用了定位,.元素会提升一个层级(如果与别的元素发生重叠,会在别的元素上面)

如果多个元素同时开启了定位.层级都一样的情况下.如果发生重叠.则后面的元素会盖住前面的元素

如果想调整层级 可以使用z-index:来调整层级,

需要注意的是

1.没有开启定位的元素不可以使用z-index属性

2.父元素的层级再高,也不会盖住子元素

相对定位(相对于元素原来的位置偏移)

position:relative;
left:
top:

绝对定位(相对于祖元素 偏移)

position:absolute;
left:
top:

固定定位(相对于浏览器窗口偏移)

position:fixed;
left:
top:

相对定位的特点:

1.相对定位的元素不会脱离文档流(所以元素在文档流中的特征他都包含)

2.相对定位元素会提升一个层级(如果与其他元素发生重叠 它会在上面)

3.相对定位不会改变元素的性质(块元素仍然是块元素,行内元素仍然是行内元素)

4.相对定位.但是不设置任何偏移值,.元素则不会有任何变化

绝对定位的特点:

1.绝对定位如果不设定任何偏移值,元素位置不会有任何改变(后面的就不一定了)

2.绝对定位会使得元素脱离文档流

3.绝对定位是相对于离他最近的开启了定位的元素进行定位的,如果都没有,则相对于body进行定位(所以通常给父元素也加一个定位)

4.绝对定位也会使得元素提升一个层级

5.绝对定位会改变元素的性质.行内元素会变成块状元素(因为会脱离文档流,也就是脱离文档流的特性)

固定定位:

固定定位也是绝对定位的一种.拥有绝对定位的大部分特点

但是他是相对于浏览器窗口的位置进行定位.比如漂浮的客服,回到顶部.这类的按钮都是使用的固定定位

css定位:相对定位、绝对定位、固定定位的区别与特性的更多相关文章

  1. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  2. 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位

    相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...

  3. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  4. HTML定位——绝对定位和相对定位、固定定位

    1.绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间. 绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素.如果当前需要被定为的 ...

  5. css 浮动 相对定位 绝对定位区别

    今天下班在地铁上看了一个样式教学视频,因为最近在学习前端.以前刚毕业的时候,感觉后台才是王道,但最近发现,前端也很重要,比如:自己接一些私单做的时候,自己要根据需求做好界面,才能更加符合客户需求,不然 ...

  6. 关于网页设计的css+html相对定位和决定定位的理解

    css中有很多定位,其中最重要的是相对定位和绝对定位: 定位很重要,不搞好,网页就会很乱,显示的完全不是自己想要的效果,自己必须掌握: 首先说一个重要的结论:绝对定位,是不占位置的,总是相对离自己最近 ...

  7. webapp中绝对定位/固定定位与虚拟键盘冲突的问题

    $('body,html').height(document.body.clientHeight); 进入页面的时候就把高度固定住,这样虚拟键盘打开页面高度不会变化,你的布局也不会乱. 测试有效. 当 ...

  8. Day042---浮动 背景图设置 相对定位绝对定位

    1.练习浮动 2.文本属性和字体属性 文本对齐 ​ text-align left 左对齐 right 右对齐 center 中心对齐 justify 两边对齐 只适应于英文 text-indent ...

  9. CSS层定位——固定定位,相对定位,绝对定位

    主要写关于层定位的相关知识 ㈠定位概述 ⑴像图像软件中的图层一样可以对每一个layer能够精确定位操作 ⑵层定位的position属性决定了当前的一个网页元素,可以叠加到另一个网页元素上面,那么我们把 ...

  10. [Web 前端] 019 css 定位之绝对定位与相对定位

    1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...

随机推荐

  1. hadoop单机 搭建

    jdk环境变量配置 下载hadoop 配置hadoop环境变量 修改hadoop 的三个配置文件:sore-site.env.hsfs-site 初始化 启动 jps查看有三个:namenode.da ...

  2. QLCDNumber

    继承于  QFrame 展示LCD样式的数字,它可以显示几乎任何大小的数字,它可以显示十进制,十六进制,八进制或二进制数 能够展示的字符: 0/O, 1, 2, 3, 4, 5/S, 6, 7, 8, ...

  3. Arduino-LiquidCrystal_I2C 液晶库

    I2C转接板上[PCF8574T转接板]VCC接5V,GND接GND,SCL接SCL(即A05),SDA接SDA(即A04) 常用的函数是 lcd.init(),lcd初始化 setCursor(x, ...

  4. man da'te

    DATE(1)                 用户命令                      DATE(1) 名称  日期-打印或设置系统日期和时间  简介   date [OPTION]... ...

  5. SpringCloud学习系列-构建部门微服务提供者Module

    1.新建microservicecloud-provider-dept-8001 2.POM <project xmlns="http://maven.apache.org/POM/4 ...

  6. heroinfo_set.all 函数

    如果是 一对多 关系 即使用 heroinfo_set.all  此时关联字段类型通用,即上边的字段通用,但是需要添加many=True的参数heroinfo_set = serializers.Pr ...

  7. Centos7 离线安装 php7

    问题:因内部管控,机器无法连接公有yum源安装php. 正常安装php7可以参考CentOS7.2 安装 PHP7.2 下面的代码也是一种方法 yum -y install libmcrypt lib ...

  8. PHP基础教程 常见PHP错误类型及屏蔽方法

    程序只要在运行,就免不了会出现错误,错误很常见,比如Error,Notice,Warning等等.这篇文章兄弟连PHP培训 小编来跟大家具体说一下PHP的错误类型和屏蔽方法.在 PHP 中,主要有以下 ...

  9. php shuffle()函数 语法

    php shuffle()函数 语法 作用:把数组中的元素按随机顺序重新排序:富瑞华 语法:shuffle(array) 参数: 参数 描述 array 必需.规定要使用的数组. 说明:若成功则返回 ...

  10. <知识整理>2019清北学堂提高储备D2

    简单数据结构: 一.二叉搜索树 1.前置技能: n/1+n/2+……+n/n=O(n log n)  (本天复杂度常涉及) 2.入门题引入: N<=100000. 这里多了一个删除的操作,因此要 ...