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:$( ...
随机推荐
- ACM ICPC Asia Regional 2011 Kuala Lumpur C题
看了逆波兰表达式之后,发现真是强悍的数据结构,栈的应用怎么感觉一辈子也学不完了呢 后缀表达式即逆波兰表达式,就是将所有的运算符按照一定的等级全部都安排到数字的后面去,实现正确的运算法则. OK,代码要 ...
- [转]WinForm如何调用Web Service
1.建立项目WebService和WinForm项目,这里起名为WinFormInvokeWebService,如图所示, 2.Service1.asmx代码为:(这部分其实和上篇的代码是一样的) u ...
- 韦东山yy公开课笔记(2)--汇编，段，栈，重定位/链接地址，位置无关吗
1. 要不要学习汇编 可以只懂一点,工作中基本不用,一旦用就是出了大问题 ldr : load 读内存 ldr r0, [r1] : r1里存放的是地址值, 去这个地址读取4字节的内容,存入r0 s ...
- Python安装、配置
1.Python简介:Python在Linux.windows.Mac os等操作系统下都有相应的版本,不管在什么操作系统下,它都能够正常工作.除非使用平台相关功能,或特定平台的程序库,否则可以跨平台 ...
- CURL超时处理
一般会设置一个超时时间1S,就是说如果php那边在1S内没有返回给urlserver的话就忽略掉该请求,及不阻塞等待返回了,直接处理下面的操作. 现在php那边有时候会卡,这样一卡就无法再1S内返回消 ...
- CF_402C Searching for Graph 乱搞题
题目链接:http://codeforces.com/problemset/problem/402/C /**算法分析: 乱搞题,不明白题目想考什么 */ #include<bits/stdc+ ...
- 组件局域网中的无集线器、Windows XP、Windows 7、Windows 8的对等网
为什么要用对等网? 答:对等网采用分散管理的方式,网络中的每台计算机既作为客户机又可作为服务器来工作,每个用户都管理自己机器上的资源. 组建局域网中无集线器的对等网 组建局域网中Windows XP ...
- Redis指令文档
连接控制QUIT 关闭连接AUTH (仅限启用时)简单的密码验证 适合全体类型的命令EXISTS key 判断一个键是否存在;存在返回 1;否则返回0;DEL key 删除某个key,或是一系列key ...
- JavaScript- The Good Parts CHAPTER 2
I know it well:I read it in the grammar long ago.—William Shakespeare, The Tragedy(悲剧:灾难:惨案) of Titu ...
- android图片闪烁或帧动画
remote_recording_transition.xml 文件 <?xml version="1.0" encoding="utf-8"?> ...