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:$( ...
随机推荐
- 用css控制cellspacing、cellpadding
用css控制cellspacing.cellpadding 发表于 2006 年 12 月 24 日 由 Silbo 在table中控制单元格之间的间距要用到cellspacing.cellpaddi ...
- 热修复 RocooFix篇(一)
吐槽之前先放一张大帅图. (md 这张图貌似有点小 不纠结这个了==) 有时候项目刚刚上线或者迭代 测试或者在线上使用测出一个bug来 真让人蛋疼 不得不重新改bug测试 打包混淆上线感觉就向find ...
- DataProvider 传递参数
package roger.testng; import org.testng.annotations.DataProvider; import org.testng.annotations.Test ...
- 在今天，我们为什么还要做一个CMS
我们今天看到,在这个移动大潮席卷来的这几年,互联网以惊人的速度改变着这个世界.包括我们这个在中国互联网史上有重大影响力的“站长”,也几乎全军覆没.当然随着站长们兴起的开源CMS,到今天也都穷途末路了. ...
- BestCoder Round #81 (div.2) B Matrix
B题...水题,记录当前行是由原矩阵哪行变来的. #include<cstdio> #include<cstring> #include<cstdlib> #inc ...
- WebView相关设置
//定义一个WebView的WebSetting WebSettings mWebSettings = mWebView.getSettings(); // 让网页自适应屏幕宽度 ...
- Spring笔记之(一)初探
对spring框架的学习我是从模拟它的简单实现开始,这样也易于领悟到它的整个框架结构,以下是简单实现的代码: 配置文件:spring.xml <?xml version="1.0&qu ...
- （原）Eclipse Tomcat配置（2014.12.27——By小赞）
Eclipse中配置自己已经安装的Tomcat 首先为Eclipse安装Tomcat插件: 进入Tomcat插件下载页:http://www.eclipsetotale.com/tomcatPlugi ...
- 把普通的git库变成bare库
$ cd your_repo $ mv .git .. && rm -fr * $ mv ../.git . $ mv .git/* . $ rmdir .git $ git conf ...
- MySql避免全表扫描
对查询进行优化,应尽量避免全表扫描,首先应考虑在where 及order by 涉及的列上建立索引: .尝试下面的技巧以避免优化器错选了表扫描: · 使用ANALYZE TABLE tbl_name为 ...