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:$( ...
随机推荐
- google官方提供的编译android源码的环境初始化，Initializing a Build Environment
原文网址:http://source.android.com/source/initializing.html Initializing a Build Environment IN THIS DOC ...
- DNS----域名解析系统
DNS就是域名解析系统,它可以将IP转换成域名,也可以将域名转换成IP 1. 安装DNS服务 开始—〉设置—〉控制面板—〉添加/删除程序—〉添加/删除Windows组件—〉“网络服务”—〉 ...
- WinForm触摸屏程序功能界面长时间不操作自动关闭回到主界面 z
操作者经常会在执行了某操作后,没有返还主界面就结束了操作然后离开了,程序应该关闭功能窗体自动回到主界面方便下一位操作者操作.那么对于WinForm程序怎么实现呢? 实现原理:拦截Application ...
- net 内存泄露和内存溢出
一直以来都对内存泄露和内存溢出理解的不是很深刻.在网上看到了几篇文章,于是整理了一下自己对内存泄露和内存溢出的理解. 一.概念 内存溢出:指程序在运行的过程中,程序对内存的需求超过了超过了计算机分配给 ...
- nmon for linux
nmon(为Nigel's performance Monitor的简写) for linux工具是 IBM开源的在POWER, x86, x86_64, Mainframe & now AR ...
- Velocity介绍
Velocity是一个基于Java的模版引擎,它是一个简单并且功能强大的开发工具,你可以非常容易地创建和呈现出.在这个介绍当中,我们希望可以给出一个使用基本Velocity的概述. 使用Velocit ...
- Dynamic Vertex Buffers
ynamic vertex buffers on the other hand allow us to manipulate the information inside the vertex buf ...
- sunlime操作
ctrl+p 查找文件 @进行符号查找ctrl+h 替换文件 选中字符以后多次按 ctrl+D 跳过则按 ctrl+Kctrl+shift+d 复制多行alt+f3 多选 ctrl+shift+p ...
- 定时备份为Sharepoint做网站备份，并删除指定日期的备份
一.创建bat文件 @echo cd \ c: cd "Program Files\Common Files\Microsoft Shared\web server extensions\1 ...
- pptp vpn
webalizer是一个高效的.免费的web服务器日志分析程序.其分析结果以HTML文件格式保存,从而可以很方便的通过web服务器进行浏览; http://daliang1215.iteye.com/ ...