css-position的相关用法
简介
position用于固定位置，是尤为重要的一个属性
其值可以为：
- static: 默认值，忽略top, bottom, left, right 或者 z-index 声明
- relative: 相对于该父级区域以及上一个子集区域的定位，用top, bottom, left, right来设定，可以使用Z-index
- absobute: 相对于该父级区域的位置【左上角】的定位，用top, bottom, left, right来设定，可以使用z-index
- fixed: 相对于浏览器的定位，忽略父级位置等的其他位置，可以使用Z-index
- inherit: 继承父级position的属性
具体
<style type="text/css">
div
{
position:100px 100px;
width:100px;
height:100px;
border:5px solid black;
}
div.pos_left
{
position:relative;
left:-20px;
border:5px solid green;
}
div.pos_right
{
position:relative;
left:20px;
border:5px solid green;
}
div.pos_ab
{
position:absolute;
left:30px;
top:50px;
border:5px solid blue;
}
div.main
{
position:absolute;
left:100px;
top:50px;
width:200px;
height:300px;
border:5px solid red;
}
div.pos_fix
{
position:fixed;
left:10px;
top:0px;
clip:rect(0px 50px 200px 0px);
}
</style>
</head> <body>
<div class="main">
<div>1.normal</div>
<div class="pos_left">2.re-left:-20px</div>
<div class="pos_right">3.re-left:20px</div>
<div class="pos_ab">4.ab-(left:30px,top:50px)</div>
<div class="pos_right">5.re-left:20px</div>
<div class="pos_fix">6.fix-(left:30px,top:50px)</div>
</div>
其中：
- 【2】,【3】,【5】 为relative
left:-20px;
top:-50px;
- 【4】为absolute
当设定position: relative
则参照父级中左上角为原始点结合TRBL属性进行定位。无父级则以浏览器的左上角为原始点
同时我们由relative属性的【5】看出 —— 【5】是相对【3】的空间而言的
—— absolute相当于直接覆盖而不占有真正的空间，即脱离文本流，由后续元素填补
- 【4】为absolute
当设定position: relative —— 则以浏览器的左上角为原始点
此外
- 只有当设定TRBL属性（TOP、RIGHT、BOTTOM、LEFT）时，relative，absolute，fixed才有效，不然将遵从正常的HTML布局规则，在前一个对象之后立即被呈递。
- 页面居中显示时一般不用absolute，因为放缩时，absolute会以浏览器的左上角为顶点，当然也可将其固定在一个父级区域中，固定宽度来解决
- 【6】中所用到的 clip:rect(0px 50px 200px 0px); 可以对区域进行裁剪
- z-index，可设置层数，高数值的元素总是会处于低数值元素的上面【只有position属性值为absolute、relative或fixed时才有效】
css-position的相关用法的更多相关文章
- jQuery css,position,offset,scrollTop,scrollLeft用法
jQuery css,position,offset,scrollTop,scrollLeft用法: <%@ page language="java" import=&quo ...
- Css相关用法个人总结
Css相关用法个人总结
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- css before after基本用法【转】
<HTML><HEAD> <meta http-equiv="content-Type"content="text/html;charset ...
- jquery 获取css position的值
jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...
- slf4j log4j logback关系详解和相关用法
slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...
- css position的使用
css position的使用 css 的 position 属性是用来设置元素的位置的,它还能设置一个元素出现在另一个元素的下层元素能用 top,bottom,left 和 right 属性设置位置 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
- $.ajax等相关用法
下面是jquery一些方法的相关用法: $.ajax: $.ajax({ type: "GET", url: "url", data: {username:$( ...
随机推荐
- 基于.NET平台的分布式应用程序的研究
摘 要:.NET框架是Microsoft用于生成分布式Web应用程序和Web服务的下一代平台.概述了用于生成分布式应用程序的.NET框架的基本原理.重点讲述了.NET框架的基础:公共语言运行时(CLR ...
- 使用Spring MVC 的表单控制器SimpleFormController
以注册过程为例,我们可能会选择继承AbstractController来实现表单的显示,继承AbstractCommandController来实现表单的处理 ,这样是可行的,但必须要维护两个控制器 ...
- HDU-1240 Asteroids! （BFS）这里是一个三维空间，用一个6*3二维数组储存6个不同方向
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...
- 【原创】Mac上编译Hadoop1.0.3出现的一些问题
create-native-configure: [exec] configure.ac:47: error: possibly undefined macro: AC_PROG_LIBTOOL [e ...
- POJ2229 - Sumsets（完全背包）
题目大意 给定一个数N,问由不同的2的幂之和能组成N的方法有多少种 题解 看完题目立马想到完全背包...敲完代码上去超时了....后来发现是%的原因...改成减法就A了...%也太他妈耗时了吧!!!( ...
- key_t键和ftok函数
系统建立IPC通讯(如消息队列.共享内存时)必须指定一个ID值.通常情况下,该id值通过ftok函数得到. ftok原型如下: key_t ftok( char * fname, int id ) f ...
- hdoj 1465 不容易系列之一
转 原文网址 http://blog.csdn.net/liwen_7/article/details/7646451 错排问题 错排问题 就是一种递推式,不过它比较著名且常用,所以要熟记! 方法 ...
- .Net设计模式_开篇
前言 其实以前看过两次设计模式,现在想来,几乎已经对设计模式没有任何印象,说明根本没有理解.或者说几乎不用,所以我除了单列.工厂外的设计模式几乎全部忘记了.最近需要写一个引擎,想用UML设计整体的架构 ...
- 前端javascript规范文档 （http://www.xuanfengge.com/category/web）
说明:本文档为前端JS规范 一.规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, ...
- Android_消息机制
Android通过Looper.Handler来实现消息循环机制. Android的消息循环是针对线程的,每个线程都可以有自己的消息队列和消息循环. Android系统中的Looper负责管理线程的消 ...