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; /* 颜色 * ...
随机推荐
- ORA-14400: inserted partition key does not map to any partition
ORA-14400: inserted partition key does not map to any partition 数据库表已经分区,如果插入数据时出现错误提示: ORA-14400: 插 ...
- 对$NOMOD51的理解
很多朋友在看asm代码的时候,对下面的语句不是很了解,下面解说一下. $NOMOD51 $INCLUDE (REG932.INC) 解释:$NOMOD51,这一指令功能是使A51不识别8051的所有预 ...
- VCL线程的同步方法 Synchronize（用消息来同步）
看本文时,可以同时参考:Delphi中线程类 TThread实现多线程编程(事件.临界区.Synchronize.WaitFor……) 先说一下RTL和VCL RTL(Run-Time library ...
- 学习笔记之--Navicat Premium创建数据表
1.打开Navicat Premium,点击连接,选择MySQL,创建新连接.输入安装MySQL是的用户名和密码.点击确定. 2.admin数据连接已经创建成功.下面为admin新建数据库,输入数据库 ...
- 《火球——UML大战需求分析》(第3章 分析业务模型-类图)——3.8 小结与练习
摘要:类图(Class Diagram)可能是用得最多的一种UML图.类图的基本语法并不复杂,你可能最多学习两三天就可以掌握,然而要真正做到活用类图则可能需要几年的功力.类图是锻炼面向对象分析(OOA ...
- 【错误】：MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts'
错误:MySql Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts' 解决 ...
- C#执行zip文件压缩的几种方法及我遇到的坑总结
工作项目中需要用到zip压缩解压缩文件,一开始看上了Ionic.Zip.dll这个类库,操作方便,写法简单 对应有个ziphelper类 using Ionic.Zip; public static ...
- 【sql语句】好用的sql语句之项目数据库学习总结
转载请注明出处:http://blog.csdn.net/pearyangyang/article/details/41115491 这几天学习公司系统的数据流向.主要涉及到几个表的数据. 可是表中的 ...
- 用 oracle vitual box 克隆虚拟机，找不到eth0的解决方案
用 oracle vitual box 克隆虚拟机 当我们需要使用多台虚拟机的时候,如果一台一台的安装,实在是太过麻烦了.所以一般的虚拟机软件都为我们提供了克隆已有虚拟机状态的功能.Oracle vi ...
- 二、Mp3帧分析（标签帧）
Mp3文件由帧组成,帧分成标签帧和数据帧,本文就Mp3文件的帧进行分析. 一.标签帧 MP3帧头中除了存储一些象private.copyright.original的简单音乐说明信息以外,没有考虑存放 ...