为什么总是要求使用position的时候父类是relative
当我们使用position的时候,一般来说外面的框架是使用relative,里面的元素使用absolute的,这里有两个注意点:
1.如果我们不给父类一个position属性的时候,那么子元素就会以body为参照物,于是东西就自动【跑掉了】,所以父类的position是必不可少的。
2. 如果父类使用的position也是absolute的时候,父类也会一起脱离文档流,使得父元素不占对应的空间从而导致元素崩溃,即——各个元素摆放位置错乱。而且父元素因为是absolute,所以对应的对象变成了body,导致你就只能精巧的计算元素的位置,然后【凭空】放上去。
为什么总是要求使用position的时候父类是relative的更多相关文章
- CSS中position属性 (absolute,relative,static,fixed)
只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...
- css position 应用(absolute和relative用法)
1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位 ...
- 【学习笔记】HTML position(static、fixed、relative、absolute)
[本文转载] position的四个属性值:static.fixed.relative.absolute 下面分别讲述这四个属性:<div id="parent"> ...
- 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
- $(window).scrollTop() 获取当前的鼠标位置 offset.left()指定标签在html中的坐标 offset.top() 指定标签在html中的坐标position() 指定标签相对父(relative)标签的坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- 定位 position: absolute & relative
[position:absolute] 意思是绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.LEFT(下面简称TRBL)进行定位,有以下属性: 1)如果没有TRBL,以父级 ...
- position属性的四个value
As we all know, position属性有四个值,分别为 relative,fixed,absolute, static. 1,relative相对定位 (不会脱离文档流) 在一个相对定位 ...
- position&containing block
一.包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块. 1.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...
随机推荐
- MFC HTTP
CInternetSession m_winet(NULL,,INTERNET_OPEN_TYPE_DIRECT,NULL,NULL,); CHttpConnection *pConnection; ...
- chapter 14_1 环境
Lua将其所有的全局变量保存在一个常规的table中,称为“global environment”. Lua将环境table自身保存在一个全局变量_G中,_G._G等于 _G . 比如下面的代码打印出 ...
- Openjudge-计算概论(A)-计算书费
描述: 下面是一个图书的单价表:计算概论 28.9 元/本数据结构与算法 32.7 元/本数字逻辑 45.6元/本C++程序设计教程 78 元/本人工智能 35 元/本计算机体系结构 86.2 元/本 ...
- ural 1698. Square Country 5(记忆化搜索)
1698. Square Country 5 Time limit: 2.0 secondMemory limit: 64 MB The first arithmetical operation ta ...
- CentOS的KVM实践(虚拟机创建、网桥配置、Spice)
最近公司准备上一套基于openstack的虚拟桌面系统,作为该项目的负责人,觉得有必要自己实践一下,该系统的搭建.最基础的就是需要了解基于linux的kvm的实践. 一.基础软件包准备 系统是采用px ...
- 如何使用ajax(jquery)
以下是我第一次工作时写的ajax: $.ajax({ url: "/spinweb/store/storeHome.do", dataType: 'json', data: { & ...
- codeforce Gym 101102A Coins (01背包变形)
01背包变形,注意dp过程的时候就需要取膜,否则会出错. 代码如下: #include<iostream> #include<cstdio> #include<cstri ...
- SMO 的环境
Microsoft SQL Server System CLR Types - http://go.microsoft.com/fwlink/?LinkId=123721&clcid=0x40 ...
- .NET下,关于文件夹权限设置的小细节
InheritanceFlags 指定哪些接受权限继承 InheritanceFlags.ContainerInherit 下级文件夹要继承权限. InheritanceFlags.None 下级文件 ...
- git基本命令--远程
git clone: # clone到 <本地目录名> $ git clone <版本库的网址> <本地目录名> # 克隆版本库的时候,所使用的远程主机自动被Git ...