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; /* 颜色 * ...
随机推荐
- javacc
http://www.cnblogs.com/Gavin_Liu/archive/2009/03/07/1405029.html https://javacc.java.net/ http://www ...
- TCP连接探测中的Keepalive和心跳包. 关键字: tcp keepalive, 心跳, 保活
1. TCP保活的必要性 1) 很多防火墙等对于空闲socket自动关闭 2) 对于非正常断开, 服务器并不能检测到. 为了回收资源, 必须提供一种检测机制. 2. 导致TCP断连的因素 如果网络正常 ...
- Eclipse上GIT插件EGIT使用手册ﾧ
Eclipse上GIT插件EGIT使用手册 一_安装EGIT插件 http://download.eclipse.org/egit/updates/ 或者使用Eclipse Marketplace,搜 ...
- Android技术路线图
邮件问题: 老师你好,我从去年就在看你的关于Android的视频了,的确讲的不错,去年看了一段时间,寒假的时候回家重新复习了一下Java基础知识,开学的时候看到你又陆续出了一些视频,这段时间看完了,跟 ...
- 04747_Java语言程序设计（一）_第2章_运算和语句
推荐使用f2 public class Aserver { public static void main(String args[]) { float f1 = (float) 12.345; fl ...
- 【转】android 电容屏（三）：驱动调试之驱动程序分析篇
关键词:android 电容屏 tp 工作队列 中断 坐点计算 电容屏主要参数平台信息:内核:linux2.6/linux3.0系统:android/android4.0 平台:S5PV310( ...
- crm操作知识库文章实体
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using Microsoft ...
- Android手机APN设置（中国移动 联通3G 电信天翼），解决不能上网的问题
中国移动 第一步,设置CMNET上网 新建APN 1.名称:cmnet 2.APN:cmnet 3.APN类型:default 就仅仅填写上面3个选项,其它都是默认,不用填写. 第二步,设置彩信 新建 ...
- jquery优化引发的思考
无意间看到jquery优化的一个细节让我觉得不可思议记录一下.仅仅只是换个地方代码就能提高数倍的效率,带给我的不是个仅是个小技巧,而是一总编程思想,技术大牛往往是在细节上体现. 通过缓存最小化选择操作 ...
- (转)android多国语言适配
android多国语言文件夹 android多国语言文件夹文件汇总如下:(有些语言的书写顺序可能跟中文是相反的) 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中 ...