css的position中absolute和fixed的区别
fixed:固定定位
absolute:绝对定位
区别很简单:
1、没有滚动条的情况下没有差异
2、在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动
常用场合:
1.fixed常用于网站边缘的公司联系方式和快速回到顶部
2.absolute常用于页面
、、、、、、、、、、、、、、、、、、、、、、、
我们知道,css的position定位属性中,表示绝对定位的有两个值,值absolute与值fixed。
都是绝对定位,二者有一致性,也有不同点。那么二者的区别是什么呢?那就是position的fixed值定位的元素会固定在原来的位置不变,不管你如何拖动滚动条,元素都不会改变位置,这从fixed这个英文单词的意思也可以看出,“固定的,不变的,固执的”。而absolute正好相反,拖动滚动条时元素会随着改变位置。
css的position中absolute和fixed的区别的更多相关文章
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- position的absolute与fixed,absolute与relative共同点与不同点
absolute与fixed 共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absol ...
- css总结1:position定位:absolute/relative/fixed
1 [Positioning(定位)] Positioning作用:指定了元素的定位类型.position包括四个值:static,relative,fixed,absolute. css定位解析:元 ...
- css中的position 的absolute和relative的区别(转)
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- 【对比分析四】position的absolute与fixed共同点与不同点
共同点: (1) 改变行内元素的呈现方式,display被置为block: (2) 让元素脱离普通流,不占据空间: (3) 默认会覆盖到非定位元素上 不同点: absolute的”根元素“是可以设置的 ...
- position的absolute与fixed共同点与不同点
这个问题面试被问到过~~ A:共同点: 1.改变行内元素的呈现方式,display被置为block: 2.让元素脱离普通流,不占据空间: 3.默认会覆盖到非定位元素上 B不同点: absolute ...
- position定位-absolute与fixed
1. absolute 生成绝对定位元素,相对于static定位以外的第一个父元素进行定位. 2. fixed 生成绝对定位元素,相对于浏览器窗口进行定位.
随机推荐
- angular学习笔记(6)- 指令
angular1学习笔记(6)- 指令 restrict-匹配模式 1.A - 属性 <my-menu title=Products></my-menu> 2.M - 注释 & ...
- 如何移除HTML5 input在type="number"时的上下小箭头
在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance ...
- springboot获取properties文件的配置内容(转载)
1.使用@Value注解读取读取properties配置文件时,默认读取的是application.properties. application.properties: demo.name=Name ...
- Metadata获取的三种方式
本文的试验环境为CentOS 7.3,Kubernetes集群为1.11.2,安装步骤参见kubeadm安装kubernetes V1.11.1 集群 0. Metadata 每个Pod都有一些信息, ...
- netty源码解析目录
第一章 java nio三大组件与使用姿势 二.netty使用姿势 三.netty服务端启动源码 四.netty客户端启动源码 五.NioEventLoop与netty线程模型 六.ChannelPi ...
- React组件间的通信
1.子组件调用父组件,采用props的方式进行调用和赋值,在父组件中设置相关属性值或者方法,子组件通过props的方式进行属性赋值或者方法调用: 2.父组件调用子组件,采用refs的方式进行调用,需要 ...
- DroneCI启用privileged
https://www.aliyun.com/jiaocheng/123155.html?spm=5176.100033.2.5.EIV4p6 drone的服务需要配置DRONE_ADMIN环境变量, ...
- dubbo请求报文实例
dubbo请求报文实例: ============================================= Request [ id=6723668, // 消息ID,Long类型 vers ...
- 干货!最全羽毛球技术动态分解gif图
羽毛球的技术千变万化,但是离不开最基本的击球方法.下面通过一组形象的动态图,给你展现羽毛球的基本动作.大家,务必要收藏起来,慢慢体会哦! 一.发球 二.前场技术 1.网前球 2.搓球 3.勾球 4.推 ...
- Nodejs 使用log4js日志
一.创建log4.js文件,保存日志到log文件,并在控制台输出,如果不控制台输出,把删除红色的代码 const log4js = require('log4js'), path = require( ...