CSS布局之定位详解(position)
来源:互联网 发布:为什么不能登录淘宝网 编辑:程序博客网 时间:2024/04/30 06:06
一、relative
将某一个元素设置为相对定位后,通过设置left、right、top、bottom,它可以参照自己的原始位置进行移动。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
<!doctype html><html><head><meta charset="utf-8"><title>相对定位示例</title><style type="text/css">h2.pos_left{position:relative;left:-20px/*左边距减20px,相对于原来的位置左移20px*/}h2.pos_right{position:relative;left:20px/*左边距加20px,相对于原来的位置右移20px*/}</style></head><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2></body></html>
二、absolute
相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素(已定位的意思是指设置了position:relative),如果不存在已定位的祖先元素,那么“相对于”最初的包含块。层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 以这个div为参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
让box2以橘色div为参照物
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
因为橘色div是最初的包含块,所以在都不设置定位的情况下,默认以橘色div为参照物。
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
此外,还要注意仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:
IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图:
三、fixed
元素框的表现类似于absolute,不过其包含块是视窗本身。
参考:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html
- CSS布局之定位详解(position)
- css布局与定位 之 position
- css布局定位(position + display)
- css position之absolute定位详解
- css position定位详解
- CSS布局中的定位position
- 栋栋晓07:详解css布局中的定位position属性
- Css 之 position 定位
- CSS之position定位
- css定位之position
- css之position定位
- 简单理解页面布局之CSS position定位
- CSS定位属性Position详解
- css中的position定位详解
- CSS定位属性Position详解
- CSS定位属性Position详解
- CSS定位属性Position详解
- CSS定位属性Position详解
- 根据总页数制作的分页按钮,有跳转功能以及多页数的时候中间按钮显示...功能
- Linear Regression Code
- (转转转)AndroidStudio下如何输出jar包给其他开发环境使用
- Android中Dialog和Toast及其Snackbar的使用和区别
- 5. Longest Palindromic Substring
- CSS布局之定位详解(position)
- Windows API概述
- Python学习记录day8-面向对象进阶、反射和异常处理
- android自定义图表的手势处理
- Service的生命周期
- 阿里云ECS云服务器 ASP建站 遇到的问题汇总
- Windows下配置github的ssh
- 移动端手机号码弹出 发送短信
- 线性代数:置换、转置矩阵和向量空间