关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解。以下说说个人的理解:

语法:

position: relative | absolute

relative:
对象遵循常规流,而且參照自身在常规流中的位置通过toprightbottomleft属性进行偏移时不影响常规流中的不论什么元素。
absolute:
对象脱离常规流。使用toprightbottomleft等属性进行绝对定位。盒子的偏移位置不影响常规流中的不论什么元素,其margin不与其它不论什么margin折叠。

说明:

当设定position: relative时,是相对于自己来定位。(即相当于当前位置移动)

当设定position: absolute时,是相对于父级来定位的,没有父级相对于body定位。

备注:position: absolute时。leftrighttopbottom至少指定其一,对象可层叠。层叠通过z-index属性定义。

position: relative时对象不可层叠

css position: relative,absolute具体解释的更多相关文章

  1. CSS position relative absolute fixed

    position属性absolute与relative 详解   最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻 ...

  2. css position: relative | absolute | static | fixed详解

    static(静态):没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. fixed(固定定位):这里所固定的参照对象是可视窗口而并非是body或是父级元素.可通过z-index ...

  3. CSS position属性absolute relative等五个值的解释

    DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...

  4. CSS 定位 relative && absolute 问题?

    1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...

  5. CSS position绝对定位absolute relative

    常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...

  6. css position static | absolute | fixed | relative

    <div id="bigbox1">    <div id="box1" class="box">box1</ ...

  7. css position 属性 (absolute 和fixed 区别)

    在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...

  8. css - position relative与display table-cell深入分析

    在很多时候,想使用 display: table; 以及其子元素使用 display: table-cell 都只是为了使用 vertical-align 这一属性.这是一个很简单的常识,但这次在项目 ...

  9. css position relative obsolution

    层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<di ...

随机推荐

  1. [PWA] Cache JSON Data in a React PWA with Workbox, and Display it while Offline

    We can view the PWA offline because we are caching the static and CDN assets for the app - but the l ...

  2. 从git下载一个工程

    1.右键点工程区,选“Import...” 2.Import source 选Git->“Projects from Git” 3.三个选择项中选最后一项CloneURI 4.弹出对话框,URI ...

  3. HTML5 Canvas 奔跑的小狗

    效果如上图,共六个图像切换,形成小狗动态奔跑效果.完整代码和图片请从  https://files.cnblogs.com/files/xiandedanteng/runningDog.rar 下载. ...

  4. MySQL的查询,子查询,联结查询,联合查询

    MySQL的查询,子查询,联结查询,联合查询 一.mysql查询的五种子句where(条件查询).having(筛选).group by(分组).order by(排序).limit(限制结果数) 二 ...

  5. Linux非阻塞IO(三)非阻塞IO中缓冲区Buffer的实现

    本文我们来实现回射服务器的Buffer.   Buffer的实现   上节提到了非阻塞IO必须具备Buffer.再次将Buffer的设计描述一下: 这里必须补充一点,writeIndex指向空闲空间的 ...

  6. C连接MySql

    连接数据库connect.c #include <stdio.h> #include <mysql/mysql.h> int main() { //MYSQL句柄 MYSQL ...

  7. GridControl 二次封装,自定义颜色样式风格

    1.自定义颜色格式,分组,筛选 1.封装类 必须引用类库 using System; using System.Collections.Generic; using System.Linq; usin ...

  8. 【优才原创】Android的拖放机制

    优才网 [优才原创]Android的拖放机制 2016-04-18 优才学院 优才网 一.拖放机制概述 ² 拖放操作是手指触摸屏幕上的某一对象.然后拖动该对象.最后在屏幕的某个位置释放该对象并运行某种 ...

  9. ubuntu16.04上安装深度学习基本框架caffe2 pytorch tensorflow opencv

    anaconda3.5.2.0----python3.6: conda  install   tensorflow-gpu  -y --prefix  /media/wkr/diskHgst/ubun ...

  10. linux epoll机制对TCP 客户端和服务端的监听C代码通用框架实现

    1 TCP简介 tcp是一种基于流的应用层协议,其“可靠的数据传输”实现的原理就是,“拥塞控制”的滑动窗口机制,该机制包含的算法主要有“慢启动”,“拥塞避免”,“快速重传”. 2 TCP socket ...