CSS中，position的绝对定位和相对定位的区别
CSS中，position的绝对定位和相对定位的区别
1、position的四个值：static、relative、absolute、fixed
绝对定位：absolute和fixed统称为绝对定位
相对定位：relative
默认值：static
2、relative定位和absolute定位的区别
relative:相对于原来的位置移动，元素设置此属性之后依旧处于文档流中，不影响其他元素的布局，最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度
absolute:元素会脱离文档流，如果设计偏移量，会影响其他元素的位置定位。定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对定位或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。脱离后原来的位置相当于是空的，下面的元素会来占据位置
3、relative和absolute定位的原理剖析
没有设置position时的效果
以下是显示效果
①absolute的定位原理
1、在父元素没有设置相对定位或者绝对定位的情
况下，元素相对于根元素定位
父元素没有设置相对定位或者绝对定位，app_name就相对于根元素定位了
2、父元素设置了相对定位或者绝对定位，元素会相对于离自己最近的设置了相对定位或者绝对定位的父元素进行定位
CSS中，position的绝对定位和相对定位的区别相关推荐
- 看完这个，css中position的绝对定位相对定位就懂了
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
问题: CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)? 搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者relative ...
- CSS中绝对定位和相对定位的区别及作用
CSS中绝对定位和相对定位的区别及作用 针对定位的区别及使用我整理一些方法 一.绝对定位 二.相对定位 三.绝对定位与相对定位的区别 四.绝对定位与相对定位的使用 结语 针对定位的区别及使用我整理一些 ...
- 【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...
- 关于CSS中position属性和overflow属性的使用小结
关于CSS中position属性和overflow属性的使用小结 position属性 用于设置某个元素的位置类型.取值类型可以有:static.relative.absolute.fixed.inh ...
- CSS中position属性值有哪些？
CSS中position属性值有哪些? 1.position:relative;相对定位 1> 不影响元素本身特性(无论区块元素还是内联元素会保留其原本特性) 2> 不会使元素脱离文档流( ...
- css中position的4个取值的含义
css中position的4个取值的含义 一.在我们书写css代码的时候,position取值有4个,分别是: 1. Absolute:绝对定位,是相对于最近的且不是static定位的父元素来定位 2 ...
- CSS中position的几个属性值
CSS中position的几个属性值 position的四种取值 : static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定 ...
- css中position属性（absolute/relative/static/fixed）
css中position属性(absolute/relative/static/fixed): position:static 无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top ...
最新文章
- go 接收 ffmpeg avpacket
- UVA11134传说中的车（放棋子）
- 梯度下降和随机梯度下降为什么能下降？
- 【Tools】MarkDown教程(六)-Markdown Reference
- jboss-5.1.0_JBoss AS 7.1.0.Final“ Thunder”发布-Java EE 6 Full Profile认证！
- Selenium WebDriver的工作原理
- Windows phone UI虚拟化和数据虚拟化（一）
- 深入理解python.md_从python角度，理解进程，线程，协程.md-Go语言中文社区
- java使用Websocket获取HttpSession出现的问题与解决
- 帆软报表使用心得（转）
- 联想硬盘保护系统密码读取
- 贵大和杭电计算机科学与技术,【20考研】计算机考研专业课变动汇总
- Swift之属性的使用和实例展示
- 计算机一些简单快捷键,最全的电脑常用快捷键大全 电脑快捷键使用大全
- 浅显易懂的经济学常识
- 数据平台作业调度系统详解－实践篇
- 计算机英语 book,book是什么意思_book在线翻译_英语_读音_用法_例句_海词词典
- uTorrent设置，防止出现磁盘负荷100%
- Java大数据开发知识体系简介
- 通过堡垒机rdp 黑屏_如何绕过堡垒机远程登录