CSS的position属性:relative和absolute
relative:是相对于自己来定位的,例如:#demo{position:relative;top:-50px;},这时#demo会在相对于它原来的位置上移50px。如果它之前的元素也为relative并有偏移,则两个偏移不想加,relative只在它原本所在位置上进行偏移。relative 不脱离文档流,也就是说relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变,所以不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移位置。
absolute:使用left,right,top,bottom等属性,相对于position样式值为relative最近祖先元素为参照.如果没有则以浏览器左上角(或者BODY元素)为参照。absolute的元素不仅位置改变了,同时也脱离了文档流。 其层叠通过z-index属性定义。
CSS的position属性:relative和absolute的更多相关文章
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 前端~定位属性position(relative、absolute、fixed)的分析
前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- css中position属性(absolute|relative|static|fixed)概述及应用
position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...
- 【转】CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性( absolute | relative | static | fixed )详解
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
- CSS中position属性 (absolute,relative,static,fixed)
只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...
- CSS 浅析position:relative/absolute定位方式
## 一.position:relative 相对定位 ## 分两种情况分析: · 无 position: relative: · 有 position: relative. 代码如下图: 显示效果如 ...
随机推荐
- Python 之网络编程之socket(3)hashlib模块
hashlib模块 #hashlib 这个模块是一堆加密算法的集合体,哈希算法的加密方式不止一种 httpswww.cmd5.com md5解密 # 应用场景在需要效验功能时使用 用户密码的 ...
- Java程序基本优化
1.尽量指定类的final修饰符,因为带有final修饰符的类是不可派生的. 2.尽量重用对象. 3.尽量使用局部变量. 4.不要重复初始化变量. 5.在Java+Oracle的应用系统开发中,Jav ...
- UI的考核方式之【主题颜色 + 主题字体 + 主题样式】
首先,项目中的颜色需要怎么管理呢? 宏?常量? 宏的值可以被改变,不用宏.那就用常量.那常量的名字怎么去起名呢? WSFConstants_Color_0xCCCCCC? WSFConstants_C ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:基本的表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:让按钮看起来像个链接 (仍然保留按钮行为)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js 跳转 XSS漏洞 预防
参考:https://blog.csdn.net/qq_27446553/article/details/52433375 1.a href="_blank" 添加属性 rel=& ...
- 指定GPU运行python程序
一.命令行运行python程序时 1.首先查看哪些GPU空闲,nvidia-smi显示当前GPU使用情况. nvidia-smi 2.然后指定空闲的GPU运行python程序. CUDA_VISIBL ...
- Android中的Sqlite中的onCreate方法和onUpgrade方法的执行时机--(转)
原文:http://blog.csdn.net/jiangwei0910410003/article/details/46536329 今天在做数据库升级的时候,遇到一个问题,就是onCreate方法 ...
- 黑马客户管理系统(SSM)
黑马客户管理系统 1系统概述 1.1系统功能介绍 本系统后台使用SSM框架编写,前台页面使用当前主流的Bootstrap和jQuery框架完成页面信息展示功能(关于Bootstrap的知识,有兴趣的读 ...
- 隐患写法flag.equals("true")带来的空指针异常
分类:2008-06-04 12:47 467人阅读 评论(0) 收藏 举报 linuxjava测试 昨天,有同事A对同事B写的程序进行测试时,出现错误,看控制台信息,发现抛出了空指针异常. 调查结果 ...