为什么总是要求使用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.包含块介绍 包含块简单理解就是一个定位参考块,就是"大盒子里套小盒子"中那 ...
随机推荐
- aspnet5备忘
1. 在Windows下面运行cmd,然后执行下面的命令 @powershell -NoProfile -ExecutionPolicy unrestricted -Command "&am ...
- javamail邮件发送
// 发送邮件 public static void send(String toEmail, String content) { Session session = getSession(); tr ...
- erlang ets表
一.表遍历 通过ets:first/1获取表的第一个关键字,表中下一个关键字用ets:next/2得到,直到ets:next/2返回'$end_of_table' 当多几个进程并发访问ets表时,可以 ...
- Keyboard Test Utility v1.0.1.0 电脑键盘测试软件绿色版
软件名称: 电脑键盘测试软件绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win8 / Win7 / Vista / WinXP软件大小: 917KB图片预览: 软件简介:Keyboard ...
- 17.从键盘上输入一个正整数n,请按照以下五行杨辉三角形的显示方式, 输出杨辉三角形的前n行。请采用循环控制语句来实现。 (三角形腰上的数为1,其他位置的数为其上一行相邻两个数之和。) 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1
17.从键盘上输入一个正整数n,请按照以下五行杨辉三角形的显示方式, 输出杨辉三角形的前n行.请采用循环控制语句来实现. (三角形腰上的数为1,其他位置的数为其上一行相邻两个数之和.) 1 1 1 1 ...
- uilabel 复制
//添加一个长按响应方法 - (void)addLongPressGestureRecognizer { UILongPressGestureRecognizer * longPress = [[UI ...
- COM与.NET程序集导出和部署COM组件
为了分布式和多客户端调用我们还需要将写好的COM组件发布到一台服务器上.这里我们将组件部署到操作系统的COM+应用程序中去.如果没此需要就可以导出后,在C++环境中调用COM了. 第一步:导出COM组 ...
- ControlTemple样式
1.TextBox 样式 1.1 style <Window.Resources> <Style x:Key="aa" TargetType="{x:T ...
- laravel安装 笔记
http://laod.cn/hosts/2015-google-hosts.html 谷歌FQIP laravel安装和设置流程 1安装composer , VirtualBox和Vagrant 下 ...
- WinDbg抓取程序报错dump文件的方法
程序崩溃的两种主要现象: a. 程序在运行中的时候,突然弹出错误窗口,然后点错误窗口的确定时,程序直接关闭 例如: “应用程序错误” “C++错误之类的窗口” “程序无响应” “假死”等 此种崩溃特点 ...