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. 代码如下图: 显示效果如 ...
随机推荐
- 「POJ1734」Sightseeing trip
「POJ1734」Sightseeing trip 传送门 这题就是要我们求一个最小环并且按顺序输出一组解. 考虑 \(O(n^3)\) 地用 \(\text{Floyd}\) 求最小环: 考虑 \( ...
- 多用类型常量,少用#define预处理指令
摒弃: #define ANIMATION_DURATION 0.3 #define ERROR_MESSAGE @“ErrorMessage” 1)没有常量的类型信息 2)假设此指令声明在某个头 ...
- 十九 Spring的JDBC模版使用: 模版的CRUD的操作
Spring的JDBC模版使用: 模版的CRUD的操作 保存操作 修改操作 删除操作 查询操作 import com.ithheima.jdbc.domian.Account; @RunWith(Sp ...
- quartz spring 实现动态定时任务
在实际项目应用中经常会用到定时任务,可以通过quartz和spring的简单配置即可完成,但如果要改变任务的执行时间.频率,废弃任务等就需要改变配置甚至代码需要重启服务器,这里介绍一下如何通过quar ...
- Ajax--jQuery使用Ajax
1.jQuery对Ajax操作进行了封装,在jQuery最底层的方法是$.ajax(),第二层是 load() , $.get() 和 $.post(),第三层是 $.getScript() 和 $. ...
- 091、Java中String类之使用“==”比较
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- Day12:看节目对于高考的想法
今天看了一个科教频道的说高考的节目~ 老师问孩子的为什么要高考~ 学生说:为了以后不用辛苦,不用像爸妈一样再大冬天奔波,不辜负爸妈的期望~ 学习!高考!科举制度害了多少读书人?! 现在的高考跟科举有区 ...
- gpg加密和解密
linux:gpg加密和解密 1 创建密钥 2 查看私钥 3 导出公钥 4 导出私钥 5 导入秘钥 5.1 公钥 6 公钥加密 7 私钥解密 创建密钥 gpg --gen-key 你要求输入一下内容, ...
- 61 C项目------家庭收支软件
1,目标: ①模拟实现一个基于文本界面的<家庭收支软件> ②涉及知识点 局部变量和基本数据类型 循环语句 分支语句 简单的屏幕输出格式控制 2,需求说明: ①模拟实现基于文本界面的< ...
- activity标题栏和状态栏操作
修改显示的标题 1.修改AndroidMainfest.xml文件的label标签 2.setTitle("标签"); 去掉标签的显示 1.android:theme=" ...