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 ...
随机推荐
- Shader toy (顺手写两个Gyro)(纯代码写3D)
Shader toy (A new world) 1.一个多月了,突然忘记CSDN的password了.由于每次输password的时候都要计算一遍,于是没有计算出来- 2.回头发现都过了半年了,都快 ...
- Angular 学习笔记——自定义标签
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- java.lang.IllegalArgumentException: Wrong state classs
java.lang.IllegalArgumentException: Wrong state class, expecting View State but received class cn.et ...
- linux 设置时间
1.图形界面里面点击右上角的 “时间” 2.设置,edit 找到china G8区 date发现还没有生效 3.reboot 重启才生效了
- HDU 3732 Ahui Writes Word(多重背包)
HDU 3732 Ahui Writes Word(多重背包) http://acm.hdu.edu.cn/showproblem.php? pid=3732 题意: 初始有N个物品, 每一个物品有c ...
- MySQL查询缓存设置提高MySQL查询性能
首先看看MSYQL逻辑框架:图片来自高性能mysql 如果使用了QueryCache,当查询接收到一个和之前同样的查询,服务器将会从查询缓存中检索结果,而不是再次分析和执行相同的查询.这样就能大大提高 ...
- vi编辑器命令大全
>> from zhuhaiqing.info
- React 学习推荐
推荐学习一.React 入门实例教程 作者: 阮一峰 http://www.ruanyifeng.com/blog/2015/03/react.html 瘳雪峰的Javascript教程 ht ...
- 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数P。并将P对1000000007取模的结果输出。 即输出P%1000000007
include "stdafx.h" #include<iostream> #include<vector> #include <algorithm& ...
- 编写一个基于HBase的MR程序,结果遇到一个错:ERROR security.UserGroupInformation - PriviledgedActionException as ,求帮助
环境说明:Ubuntu12.04,使用CDH4.5,伪分布式环境 Hadoop配置如下: core-site.xml: <configuration><property> ...