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; /* 颜色 * ...
随机推荐
- 主要协议SCSI、FC、iSCSI
一.SCSI SCSI是小型计算机系统接口(Small Computer System Interface)的简称,于1979首次提出,是为小型机研制的一种接口技术,现在已完全普及到了小型机,高低端服 ...
- C语言经典程序190例
[程序1] 题目:809*??=800*??+9*??+1 其中??代表的两位数,8*??的结果为两位数,9*??的结果为3位数.求??代表的两位数,及809*??后的结果. 1.程序分析: 2.程序 ...
- 关于ArcGIS Rest API
ArcGIS Rest API: 9.3版本: http://resources.esri.com/help/9.3/arcgisserver/apis/rest/index.html 10版本:ht ...
- WIN7_64位系统安装oracle以及PLSQL方法（不用装32位oracle客户端）
一.oracle10g安装,比较简单 1.去Oracle网站下载Vista版的Oracle:Oracle Database 10g Release 2 (10.2.0.4) for Microsoft ...
- UVA_Rotation Game<旋转游戏> UVA 1343
The rotation game uses a # shaped board, which can hold 24 pieces of square blocks (see Fig.1). The ...
- 1、elasticsearch简介
1.elasticsearch简介 中文帮助文档地址:http://es.xiaoleilu.com/ • Elasticsearch是一个基于Lucene的实时的分布式搜索和分析引擎.设计用于云计算 ...
- nginx配置 的话注意几点 1.错误时注意看log 2.天威证书的话，有文档按照其文档一步步配置即可；3每句话的结尾注意千万别丢掉分号
nginx配置 的话注意几点 1.错误时注意看log 2.天威证书的话,有文档按照其文档一步步配置即可:3每句话的结尾注意千万别丢掉分号:4.配置https时 其转发可以转发到http上 pass_ ...
- mysql的wait_timeout配置
mysql数据库有一个wait_timeout的配置,默认值为28800(即8小时). 在默认配置不改变的情况下,如果连续8小时内都没有访问数据库的操作,再次访问mysql数据库的时候,mysql数据 ...
- IOS 网络判断
Reachability *connectionNetWork= [Reachability reachabilityForInternetConnection] ; int status = [co ...
- iOS 实时监听app的网络连接状态
实际iOS开发中,在网络通信中我们大部分使用第三方(只谈短链),譬如 AFNetworking.ASIHttpRequest(这个停更了,想必现在没多少人用),swift的 Alamofire 等. ...