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. 代码如下图: 显示效果如 ...
随机推荐
- 在Centos 7.7下用minikube部署单节点kubernetes.
centos8 下用yum安装docker-ce会报错,说明docker-ce对centos8支持还不太好.所以在centos7.7下安装 先更新一下系统 yum update 安装 yum工具, ...
- 基于金山快盘的Git服务器、快盘+ Git GUI 实现代码版本管理
Git,这货堪称神器,用了它就再也不想用其他VCS了,就像上了高速就不想再走国道一样. Git的强大之处在于,你可以在局域网内的任何一个共享路径下创建仓库,而不需要运行任何服务.所有的操作都是 ...
- LLDB常用指令
1.help:列举所有的命令,也可以用于查询某个命令的说明,比如,help print,help help 2.print:打印,简写为,prin,pri,p,打印的结果比如,$10代表时该结果, ...
- js对象无法当成参数传递 解决方法
思路:把对象转换为字符串进行传递 function test(){ var objParam = {"key":"value"}; var strObj = J ...
- [转载]Spring下IOC容器和DI(依赖注入) @Bean及@Autowired
Spring下IOC容器和DI(依赖注入) @Bean及@Autowired自动装配 bean是什么 bean在spring中可以理解为一个对象.理解这个对象需要换一种角度,即可将spring看做一门 ...
- Day2-G-Sticks-POJ1011
George took sticks of the same length and cut them randomly until all parts became at most 50 units ...
- 通过SparkListener监控spark应用
监控spark应用的方式比较多,比如spark on yarn可以通过yarnClient api监控.这里介绍的是spark内置的一种监控方式 如果是sparkStreaming,对应的则是stre ...
- 侧边栏下拉时箭头的旋转动画(treeView控件)
//点击菜单时箭头旋转 let treeView = document.getElementsByClassName("treeview");//let解决闭包问题 let las ...
- aforge视频录像,对界面进行重绘
由于项目需要,需要录像的时候在界面加多一个圆圈,并且一起录制下来. 只需要在NewFrame增加以下代码 private void videoSourcePlayer1_NewFrame(object ...
- Windows进程通信-共享内存空间
三个模块 1,game.exe,三个方法,控制台输入指令('A','B','R')分别控制三个方法的调用: 2,WGDll.dll,要注入到game进程中的dll文件: 3,myconsole.exe ...