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. 代码如下图: 显示效果如 ...
随机推荐
- elasticsearch 自定义routing
由于线上elasticsearch集群数据量越来越大,优化已经已经是重中之重. 优化的方式有很多中,网上一大堆,自行百度. 优化方案中有个叫routing的方案是个需要熟悉业务日志才能使用.于是我就研 ...
- 今日份学习: springboot 用到的注解
笔记 上回用到的所有注解 @Around @Aspect @Autowired @Bean @Configuration @RequestMapping @ResponseBody @RestCont ...
- 初学微信小程序——配置问题(2)
六.生命周期函数: 在微信公众平台指南中搜索生命周期,找到页面生命周期 比如,我打开cate.js并编写,代码如下: ** * 生命周期函数--监听页面加载 */ onLoad: function ...
- java读取ini文件
ini工具类; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import j ...
- popupwindow使用之异常:unable to add window -- token null is not valid
使用popwindow中又碰到一个白痴问题,在此留作纪念,希望对大家有帮助 popupwindow之所以叫这个名字,肯定是要从某个地方弹出啦,但是从哪个地方呢?必须是指定一个view嘛 void an ...
- 9.2.1 hadoop mapreduce任务输出的默认排序
任务的默认排序 MapTask和ReduceTask都会默认对数据按照key进行排序,不管逻辑上是否需要.默认是按照字典顺序排序,且实现该排序的方法是快速排序.但是map和reduce任务只能保证单个 ...
- 700k把web端程序包装为桌面程序
electron因为自带cef所以体积巨大,还不是因为windows没有chromium的webview嘛,现在有了新edge后,这个项目通过依赖各个平台的webview,并依赖.net core,做 ...
- 067、Java面向对象之不实例化对象报错
01.代码如下: package TIANPAN; class Book { // 定义一个新的类 String title; // 书的名字 double price; // 书的价格 public ...
- Regression 回归——多项式回归
回归是指拟合函数的模型.图像等.与分类不同,回归一般是在函数可微的情况下进行的.因为分类它就那么几类,如果把类别看做函数值的话,分类的函数值是离散的,而回归的函数值通常是连续且可微的.所以回归可以通过 ...
- P1069 微博转发抽奖
P1069 微博转发抽奖 转跳点: