css position: relative,absolute具体解释
关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解。以下说说个人的理解:
语法:
position: relative | absolute
- relative:
- 对象遵循常规流,而且參照自身在常规流中的位置通过top,right,bottom,left属性进行偏移时不影响常规流中的不论什么元素。
- absolute:
- 对象脱离常规流。使用top。right。bottom。left等属性进行绝对定位。盒子的偏移位置不影响常规流中的不论什么元素,其margin不与其它不论什么margin折叠。
说明:
当设定position: relative时,是相对于自己来定位。(即相当于当前位置移动)
当设定position: absolute时,是相对于父级来定位的,没有父级相对于body定位。
备注:position: absolute时。left,right。top,bottom至少指定其一,对象可层叠。层叠通过z-index属性定义。
position: relative时对象不可层叠
css position: relative,absolute具体解释的更多相关文章
- CSS position relative absolute fixed
position属性absolute与relative 详解 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...
- css position: relative | absolute | static | fixed详解
static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- CSS 定位 relative && absolute 问题?
1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- css position static | absolute | fixed | relative
<div id="bigbox1"> <div id="box1" class="box">box1</ ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- css - position relative与display table-cell深入分析
在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...
- css position relative obsolution
层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...
随机推荐
- 联想Y430P CentOS 7.3 无线网络的配置
# uname -a # 查看内核/操作系统/CPU信息的Linux系统信息命令 [root@www ~]# uname -a Linux www SMP Tue Nov :: UTC x86_64 ...
- javascript 冒泡排序算法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Android 创建Listener监听器形式选择:匿名内部类?外部类?
说到监听器,第一感觉就是直接写作匿名内部类来用,可是依据单一职责原则,好像又不应该作为匿名内部类来写(由于监听中有时要写较多的逻辑代码),所曾经段时间把有共性的listener单独创建放在glut.l ...
- Jenkins安装火线fireline插件
原文请访问:http://magic.360.cn/zh/user.html 提示:如果您是第一次使用Jenkins,请先前往文章[Jenkins下载安装配置教程] 1. 点击左上角的`Jenkins ...
- AngularJS---Unknown provider: $routeProvider
AngularJS路由报错: Unknown provider: $routeProvider 根据先知们的指引,在网上爬贴,有翻到官方的解决文章. 原来在AgularJS1.2.0及其之后的版本中, ...
- Android 下Service
1 http://www.cnblogs.com/newcj/archive/2011/05/30/2061370.html 2 http://blog.csdn.net/android_tutor/ ...
- ASP.NET CORE RAZOR :将新字段添加到 Razor 页面
https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/new-field 在本部分中,将使用 Entity Framew ...
- 利用nginx搭建tomcat集群
1.tomcat集群 利用nginx对请求进行分流,将请求平均的分给不同的tomcat去处理,减少单个tomcat的负载量,提高tomcat的响应速度. 2.创建多个tomcat服务器(同一个服务器上 ...
- vim命令行模式
1. 激活命令行模式 : 进入命令行模式 <Esc> 退出命令行模式 2. 常用命令 :p 打印 (:print) :e 读入文件 (:edit) :w 写入文件 (:write) :t ...
- 【Hadoop基础教程】2、Hadoop之单机模式搭建(转)
单机模式所需要的系统资源是最少的,这种安装模式下,Hadoop的core-site.xml.mapred-site.xml.hdfs-site.xml配置文件均为空.默认情况下,官方hadoop-1. ...