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:$( ...
随机推荐
- 惠威的M200MK3的前级电子分频板
M200MKIII是惠威融合了尖端有源电子分频技术而诞生的全新产品:双4声道运算放大器.高档玻璃纤维电路板.全SMT制作工艺.红宝石滤波电容阵列.进口金属化聚丙稀分频电容.超大功率TDA7294功放芯 ...
- SSAS数据挖掘算法简介
决策树分析算法:以二叉树的形式展现,分析出影响某种行为(如购买自行车)的因素,并对这些因素排序. 聚类分析算法:物以类聚,人以群分.分析特定群体所共同含有的属性(因素). 未完,待续..
- iOS开发——View的透明属性hidden、alpha、opaque
Hidden.Alpha.Opaque的区别 在iOS中,每个View都有Hidden.Alpha.Opaque三个关于透明的属性,官方文档介绍如下: 1. @property(nonatomic) ...
- Android webView 中loadData方法加载 带中文时出现乱码
WebView出现乱码用LoadData方法来解析html的,但是据说这是官方的一个BUG,不能用来解析中文. 采用loadDataWithBaseURL的方法,其中codeingType设置为utf ...
- 不同的jar里边相同的包名类名怎么区别导入
今天在做项目的时候遇到了一个很有意思的问题,折磨了我很长时间,不过最终还是解决了,特留此文纪念一下. 遇到的问题: 同样一段代码,在同事那就好使,在我这就找不到一个方法.引用的包也都是相同的,这种问题 ...
- 算法之旅，直奔<algorithm>之十四 fill_n
fill_n(vs2010) 引言 这是我学习总结<algorithm>的第十四篇,作为fill的亲兄弟,fill_n也会助你一把的. 作用 fill_n 的作用是给一段指定长度的数据向量 ...
- Sigar.jar获取系统信息
Sigar是Hyperic-hq产品的基础包,是Hyperic HQ主要的数据收集组件. 它用来从许多平台收集系统和处理信息,这些平台包括:Linux, Windows, Solaris, AIX, ...
- [OGRE]基础教程来七发：来谈一谈缓冲绑定
上一章我们处理监听的方案是,每一帧只处理一次. 这一次,当鼠标键盘的事件发生时,我们会立即处理它. 这里只是对缓冲输入的一个简单介绍,而不是完整的如何使用OIS的教程. 若想了解更多内容,请查阅相关的 ...
- java基础之synchronized使用方法
首先.參考文章:http://www.cnblogs.com/devinzhang/archive/2011/12/14/2287675.html PS:參考文章非常长,但内容非常丰富,若是刚開始学习 ...
- HDU 4849-Wow! Such City!（最短路）
Wow! Such City! Time Limit: 15000/8000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Other ...