css的relative与absolute（一）
relative与absolute是position的两个值，本文对这两个值得关系进行了一个小实验
实验一：
首先定义了两个div元素，代码如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
width: 300px;
height: 300px;
background-color: yellow;
} #div2{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
效果如下所示：
现在我想实现把红色的小方块移动到右边，常规的想法就是将div1设置为position：relative，将div2的值设置为position:absolute，然后通过设置div2的top与left可以进行定位。代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
position: relative;
width: 300px;
height: 300px;
background-color: yellow;
} #div2{
position: absolute;
top: 50px;
left: 200px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
如果div1不设置position:relative，会出现怎样的效果呢？代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
/* position: relative; */
width: 300px;
height: 300px;
background-color: yellow;
} #div2{
position: absolute;
top: 50px;
left: 200px;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
效果如下图所示：
效果基本没有变化，严格上讲，实际上是有一定的偏移的，这点可以通过margin进行调整，所以一般不建议过多的使用relative。
那设置div1的position为relative是不是就没有任何用处了呢？其实也不是这样的。
实验二：首先设置div1的position:relative，div2的position：absolute，并设置top与left（之所以设置top与left，是因为top与buttom同时出现的时候，top其决定作用，同理是left），代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
position: relative;
width: 300px;
height: 300px;
background-color: yellow;
} #div2{
position: absolute;
top: 250px;
left: 200px;
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
效果如下图所示：
在这种情况下，正如实验一所示，div1的position几乎不起作用，div2是个自由的小天使，想到哪里就到哪里。但是如果给div1设置top与left之后呢？
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
position: relative;
width: 300px;
height: 300px;
background-color: yellow;
top:50px;
left: 50px;
} #div2{
position: absolute;
top: 250px;
left: 200px;
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
效果如下图所示：
可以发现div2的位置就被div1限制住了，从此div2再也不是自由的小天使了，div2的偏移都是以div1位基准的了。
实验三：div1是包含div2的，可是如果div2定义了position:absolute，那个div2多余的部分就会在div1外部显示出来，即使div1设置了overflow: hidden也不会其作用，但是如果给div1加上position: relative;会怎样呢？代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{ width: 300px;
height: 300px;
background-color: yellow;
overflow: hidden;
} #div2{
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
给div1加上position:relative，会出现什么样的效果呢？
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
position: relative;
width: 300px;
height: 300px;
background-color: yellow;
overflow: hidden;
} #div2{
position: absolute;
top: 20px;
left: 20px;
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
这时div1元素会很好的限制div2的溢出部分。
css的relative与absolute（一）的更多相关文章
- css position: relative，absolute具体解释
关于CSS中 position在布局中非常重要,查了非常多资料都说的非常难理解.以下说说个人的理解: 语法: position: relative | absolute relative: 对象遵循常 ...
- css position 应用（absolute和relative用法）
1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称TRBL) 定位 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- 怕忘记了CSS中position的absolute和relative用法
CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中posit ...
- CSS 定位 relative && absolute 问题？
1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...
- CSS魔法堂：Absolute Positioning就这个样
前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们 ...
- 细谈position属性:static、fixed、relative与absolute
学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就是窗体自上而下分成一行一行,并在每行中按照从左到右 ...
- [转]Html position（static、relative、absolute、fixed）
转自:http://blog.csdn.net/topviewers/article/details/21644305 讲解不错,转载备忘. position的四个属性值: 1.relative2.a ...
- div和span、relative和absolute、display和visibility的区别
一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...
随机推荐
- tp5 数据库Db增删改操作
添加数据insert $data = [ 'name_cn' => '张三', 'name_en' => 'jack', ]; $res = Db::name('style')->i ...
- 用外部物理路由器时使用Neutron dhcp-agent提供的metadata服务(by quqi99)
作者:张华 发表于:2015-12-29版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 环境搭 ...
- QT5 QtreeWidget 实现点击item事件以及右键菜单删除item 和 重命名item
1.new 一个QTreeWidget 对象,并设置头标签,和根节点(个人程序需要) QTreeWidget* treeWidget = ui.treeWidget;//我已经在ui设计师中拖了一个Q ...
- spring: ?.运算符
?.运算符 对于被调用方法的返回值来说,我们同样可以调用它的方法.例如,如果selectArtist()方法返回的是一个String,那么可以调用toUpperCase()将整个名字改为大写字母形式: ...
- 委托+内置委托方法+多播委托+lambda表达式+事件
委托概念:如果我们要把方法当做参数来传递的话,就要用到委托.简单来说委托是一个类型,这个类型可以赋值一个方法的引用. 声明委托: 在C#中使用一个类分两个阶段,首选定义这个类,告诉编译器这个类由什么字 ...
- Node的异步I/O
node是单线程非阻塞异步I/O的模式. 阻塞I/O:完成整个数据获取的过程: 非阻塞I/O:不带数据,直接立即返回,要获取数据,还需通过文件描述符再次读取. node完成整个异步I/O的有事件循环. ...
- Xcode 查找 TODO 清单
在 Xcode 中按 Shift+Command+F,显示在项目中查找窗口,选择按正则表达式查找(Find > Regular Expression): TODO: //\s*\bTODO\s ...
- JAVA常见函数
输入函数 : Scanner cin=new Scanner(System.in); int a=cin.nextInt(); //输入一个int数据 double dl=cin.nextDou ...
- Github删除项目
相关博客:GitLab删除项目操作 发现github的项目删除按钮挺难找的,记录一下. 1,先在github打开项目,进入项目 2,点击Settings,进去后往下拉就是删除按钮.
- C#中的索引器的简单理解和用法
索引器是一种特殊的类成员,它能够让对象以类似数组的方式来存取,使程序看起来更为直观,更容易编写. 1.索引器的定义 C#中的类成员可以是任意类型,包括数组和集合.当一个类包含了数组和集合成员时,索引器 ...