position:relative/static/fixed/absolute定位的区别以及使用场景
- absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的
- relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。所以absolute会把非定位盒子覆盖掉。
- position:relative日常应用的时候一般是设置给position:absolute;的父层的,父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..
- 这里还有一个文本流的概念。表现在float和relative的区别,relative既脱离文档流也脱离文本流,而float只是脱离了文档流。所以才会表现出,float元素会把非定位盒子覆盖掉,但不会覆盖非定位盒子里面的文本,因为没有脱离文本流,非定位盒子内的文本环绕在float的周围。而对于使用absolute元素,会把非定位和自的位置和开面的文本一起覆盖掉。
- 使用场景;
l Relative用法,经验案例::
1. 给absolute元素提供定位基准
2. 有absolute元素时用其控制层级关系
l 两栏宽度自适应,常用经典做法案例::
position:relative/static/fixed/absolute定位的区别以及使用场景的更多相关文章
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- fixed 和 absolute 定位的区别
fixed:固定定位 absolute:绝对定位 在没有滚动条的情况下两者其实没有差异.但是在有滚动条后,fixed始终会在定好的位置不动,而absolute会随参照对象元素的宽高 ...
- Relative 定位与Absolute 定位实例
一直没有弄懂相对定位与绝对定位之间的关系,今天特来学习一下.本实践都是在360浏览器下测试所得. <!DOCTYPE html> <html> <head> < ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 浅析position:relative position:absolute
定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义: 在CSS中关于定位的内容是: ...
随机推荐
- git 关于commit命令的修改
1 修改最后一次提交的信息 git commit --amend 2 对于历史提交 git rebase -i HEAD~5 没毛病,
- CF1205B
CF1205B 由鸽巢原理n比较大的时候直接输出3 然后剩下的就可以跑最小环 #include<iostream> #include<cstdio> #include<c ...
- OpenGL中的空间变换
OpenGL中的空间变换 在使用OpenGL的三维虚拟程序中.当我们指定了模型的顶点之后.在屏幕上显示它们之前,一共会发生3种类型的变换:视图变换.模型变换.投影变换. ...
- CXF异常:No operation was found with the name
https://blog.csdn.net/qq_18675693/article/details/52134805 不同包下面,别忘了namespace最后要加“/”
- batch normlization (BN)的讲解
1. https://zhuanlan.zhihu.com/p/54073204(简单理解) 2. https://zhuanlan.zhihu.com/p/34879333 (有举例说明,但是不太理 ...
- 写MySQL存储过程实现动态执行SQL
转自:http://www.cnblogs.com/william-lin/archive/2013/03/19/2968727.html--存储过程名和参数,参数中in表示传入参数,out标示传出参 ...
- asp.net Mvc 增删改查
1.创建项目 已经创建好项目了 2.创建数据库 使用这个数据库或者自己创建一个数据库,一个表就好,简单 USE [LearnAdminlte] GO /****** Object: Table [db ...
- Boost Doc Home
{ //http://charette.no-ip.com:81/programming/doxygen/boost/group__async__read.html#gafe3e905a43504bd ...
- 【Flutter学习】基本组件之图标组件Icon
一,概述 图标组件(Icon)为展示图标的组件,该组件不可交互,要实现可交互的图标,可以考虑使用IconButton组件. 图标组件相关的几个组件: IconButton:可交互的Icon: Icon ...
- Extjs各版本的下载链接,包含ext3.4源码示例
最近在维护一个老平台,用的是ext3.4,老东西在网上找示例发现既然还有人收钱,谷歌了一下总算找到了一位免费的发布的,感谢 yipanbo 分享 Extjs的版本繁多,本文收集了Extjs各个版本的下 ...