css案例学习之relative与absolute
代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>absolute属性</title>
<style type="text/css">
body {
margin: 20px;
font-family: Arial;
font-size: 12px;
} #father {
background-color: #a0c8ff;
border: 1px dashed #000000;
padding: 15px;
position: relative;
} #father div {
background-color: #fff0ac;
border: 1px dashed #000000;
padding: 10px;
} #block2 {
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head> <body>
<div id="father">
<div>Box-1</div>
<div id="block2">Box-2</div>
<div>Box-3</div>
</div>
</body> </html>
说明
relative是相对于浏览器定位的，absolute是相对于relative定位的。
它们都要结合top、right、left、bottom属性来使用。
代码
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>absolute属性</title>
<style type="text/css">
body {
margin: 20px;
font-family: Arial;
font-size: 12px;
} #father {
background-color: #a0c8ff;
border: 1px dashed #000000;
padding: 15px;
position: relative;
top:20px; /*相对于浏览器*/
left:10px;
} #father div {
background-color: #fff0ac;
border: 1px dashed #000000;
padding: 10px;
} #block1 {
position: absolute;
top: 0px;
right: 0px;
} #father2 {
background-color: #a0c8ff;
border: 1px dashed #000000;
padding: 15px;
position: relative;
top:10px; /*相对于浏览器，不过基于现有的位置。*/
} #father2 div {
background-color: #fff0ac;
border: 1px dashed #000000;
padding: 10px;
} #block2 {
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head> <body>
<div id="father">
<div>Box-1</div>
<div id="block1">Box-2</div>
<div>Box-3</div>
</div> <div id="father2">
<div>Box-1</div>
<div id="block2">Box-2</div>
<div>Box-3</div>
</div>
</body> </html>
说明
absolute永远是基于父relative元素定位。relative基于现有的位置，基于浏览器定位。
css案例学习之relative与absolute的更多相关文章
- css案例学习之通过relative与absolute实现带说明信息的菜单
效果如下 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- 学习总结relative和absolute
之前对于absolute和relative不了解,现在整理 先设置relative再设置absolute 因为父不设置relative 那么子会向上寻找祖先元素,看是否设置relative.如果有则相 ...
- css中的position:relative和absolute 属性
语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象 ...
- 理解css中的position-static\relative\fixed\absolute
position属性有四个值: static(静态定位):是默认值,不会被特殊的定位,遵循正常的文档流对象,对象占用文档空间,该方式下,top.right.bottom.left.z-index等属性 ...
- css备忘录（关于relative、absolute）
父级用:position: relative; 子级才能用:position: absolute; relative里面用margin调位置: absolute里面用top.left.right.bo ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
- css案例学习之span边框实现的特殊效果
bottom left bottom right top left top right 配合颜色来使用,实现一些神奇的效果 #menu a span{ height:; width:; /*borde ...
- css案例学习之盒子模型
定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...
- css案例学习之继承关系
代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...
随机推荐
- USB系列之九：基于ASPI的U盘驱动程序
USB系列之七和之八介绍了ASPI,并通过一些实例说明了基于ASPI的编程方法,本文使用前两篇文章介绍的知识以及以前介绍的有关DOS驱动程序下驱动程序的内容实际完成一个简单的基于ASPI的U盘驱动程序 ...
- 直接地址跳转C实现
<C缺陷和陷阱>讲过的一种方法: ( *( void (*)() ) 0 )(); //跳转到0地址执行 解析: 1.void (*p_fun)(void); //声明函数指针 2.voi ...
- java中classPath和Xpath问题
java中classPath和Xpath问题 今天遇到一个问题想获取classpath对应的目录,开始还以为java源代码可以像spring配置文件.xml中一样通过classpath:来获取对应的路 ...
- uestc poj2559 秋实大哥去打工
//感觉有必要把这题放博客上待复习 刚刚写解题报告的时候发现自己又不会做这题了 //我不会告诉你这题绝对是命题人抄poj2559 这题使用一个单调递增的栈,栈内存储的元素有两个值,一个高度,一个长度. ...
- Unity 角色复活和重新开始游戏
作者写游戏完成的时候,还需要从新想下如何把游戏设置重新开始,角色如何复活. 一般大多数都会采用这种方式来代替游戏重新开始 Application.LoadLevel("xxx场景" ...
- Beauty of Array(思维)
Beauty of Array Time Limit: 2 Seconds Memory Limit: 65536 KB Edward has an array A with N integ ...
- Modulo Sum(背包 + STL)
Modulo Sum time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...
- UNIX环境高级编程--高级I/O（三）
一.高级I/O 包括非阻塞I/O.记录锁.系统V流机制.I/O多路回转(select和poll函数).readv和writev函数以及存储映射I/O(mmap),这些都是高级I/O. 其实在上面 ...
- 虚拟化之KVM的安装篇
1,在安装KVM之前,首先需要在自己的电脑开启cpu虚拟化技术(这个需要BIOS中设置). 如下操作都是在本人虚拟机中设置,所以可以看到我多添加一块磁盘,目的是用来做kvm虚拟机的磁盘. 另外,虚拟机 ...
- android中列表的滑动删除仿ios滑动删除
大家是不是觉得ios列表的滑动删除效果很酷炫?不用羡慕android也可以实现相同的效果 并且可以自定义效果,比如左滑删除,置顶,收藏,分享等等 其实就是自定义listview重写listview方法 ...