css postion 属性区别【原】
CSS样式中的postion元素有四个属性，即static | absolute | fixed | relative。
static：
默认值。无特殊定位，遵循HTML基本定位规则 。
fixed：
固定定位，参照位置是浏览器窗口的左上角，即坐标点为(0px, 0px);
relative :
对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
absolute：
绝对定位，参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角。
将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>fixed和relative和absolute的区别</title> <style type="text/css">
body{color:black;}
#static {position:static; left:100px;top:100px;width:100px; height:100px; border:1px solid black;}
#fixed {position:fixed; left:100px;top:100px;width:100px; height:100px; background:red;}
#relative{position:relative;left:100px;top:100px;width:900px; height:900px; border:1px solid blue;}
#absolute{position:absolute;left:100px;top:100px;width:100px; height:100px; background:yellow;}
</style>
</head>
<body>
<div id="static">默认static</div>
<div id="fixed">fixed固定不变</div> <div id="relative">relative滚动
<div id="absolute">absolute滚动</div>
</div> </body>
</html>
效果图:
其它文章
让div固定在顶部不随滚动条滚动【转】==>https://www.cnblogs.com/whatlonelytear/p/5571251.html
css postion 属性区别【原】的更多相关文章
- css的postion属性
在实际项目中,发现postion这个属性经常使用而且常常很重要,所以总结整理一下知识点 css中postion属性有以下可选值,分别是:static,absolute, fixed, relative ...
- 【转】CSS z-index 属性的使用方法和层级树的概念
文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面 ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- CSS will-change 属性
介绍 如果你注意到在webkit的浏览器上“flicker”一些CSS操作(尤其是变形和动画方面的)的表现,你很可能之前就注意过硬件加速了 CPU.GPU和硬件加速 硬件加速意味着Graphics P ...
- css z-index属性使用过程中遇到的问题
z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...
- css之属性部分
这篇写的是今天的学习到的属性,一共20个. 属性再多,但也要会使用,会在使用时可以记起它,才能起到它为我们所需要的作用. 样式属性 1.border CSS边框属性允许你指定一个元素边框的样式和颜色. ...
- 详解CSS position属性
原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...
- CSS背景属性Background详解
[转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...
- [转] CSS direction属性简介与实际应用 ---张鑫旭
一.用的少并不代表没有用 至少,在我接触的这么多项目里,没有见到使用过CSS direction属性做实际开发的. 为什么呢?是因为direction长得丑吗? 虽然说direction确实其貌不扬, ...
随机推荐
- BUAA软工个人作业Week3-案例分析
一. 调研评测 评测项目:为了联系移动和PC版,我同时下载了必应词典的Android版本和UWP版本,选择UWP的原因是想看看微软推广的UWP在微软自己的应用上的效果.当然主要是对安卓的测评(UWP用 ...
- MySQL服务器监控注意事项
当开发,测试,生产的数据库环境配置不一致(比如:配置字符集不同)时而导致特殊现象时,可以从Navicat的<工具>-<服务器监控>-<变量>里查找原因.
- 通过几个例子看sed的模式空间与保持空间
SED之所以能以行为单位的编辑或修改文本,其原因在于它使用了两个空间:一个是活动的“模式空间(pattern space)”,另一个是起辅助作用的“暂存缓冲区(holdingspace)这2个空间的使 ...
- pandas.DataFrame
1.可以使用单个列表或列表列表创建数据帧(DataFrame). 单个列表 import pandas as pd data = [1,2,3,4,5] df = pd.DataFrame(data) ...
- Python——反射
反射的定义:使用字符串类型的名字 去操作变量 hasattr 函数 与getatter配合使用,用来判断变量是否存在 if hasatter(my,'a'):#如果为真执行 getatter(my,' ...
- Java动态代理、XML、正则
15.1 动态代理 在之后学习Spring框架时,Spring框架有一大核心思想,就是AOP,(Aspact-Oriented-Programming 面向切面编程) 而AOP的原理就 ...
- Codeforces Round #382 (Div. 2) C. Tennis Championship
C. Tennis Championship time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- 【BZOJ4903】【UOJ#300】吉夫特（卢卡斯定理，动态规划）
[BZOJ4903][UOJ#300]吉夫特(卢卡斯定理,动态规划) 题面 UOJ BZOJ:给的UOJ的链接...... 题解 首先模的质数更小了,直接给定了\(2\).当然是卢卡斯定理了啊. 考虑 ...
- 【AGC016E】Poor Turkeys
Description 有\(n\)(\(1 \le n \le 400\))只鸡,接下来按顺序进行\(m\)(\(1 \le m \le 10^5\))次操作.每次操作涉及两只鸡,如果都存在则随意拿 ...
- 面试 -- requestLayout、invalidate与postInvalidate区别
requestLayout: 从方法名字可以知道,“请求布局”,那就是说,如果调用了这个方法,那么对于一个子View来说,应该会重新进行布局流程.但是,真实情况略有不同,如果子View调用了这个方法, ...