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; /* 颜色 * ...
随机推荐
- Linux 搭建SVN 服务器
一. SVN 简介 Subversion(SVN) 是一个开源的版本控制系統, 也就是说 Subversion 管理着随时间改变的数据. 这些数据放置在一个中央资料档案库 (repository) 中 ...
- LeeCode-Linked List Cycle
Given a linked list, determine if it has a cycle in it. /** * Definition for singly-linked list. * s ...
- MongoDB 复制
副本集:简单说,副本集就是有自动故障恢复功能的主从集群.主从集群和副本集最为明显的区别:副本集没有固定的“主节点”.整个集群会选出一个主节点.当其不能工作时,变更到其他节点.二者看起来非常相似:副本集 ...
- iphone 6s pp助手 越狱
https://www.apple.com/iphone-6/合适初高中学习英语http://www.travelchinaguide.comhttp://jailbreak.25pp.com/ ip ...
- java_IO流之 NIO
NIO 定义 即新IO,在JDK1.4的java.nio.*包中引入,其目的在于提高速度. 在Java1.4之前的I/O系统中,提供的都是面向流的I/O系统,系统一次一个字节地处理数据,一个输入流产生 ...
- ObjectOutputStream 追加写入读取错误 - 自己的实现方案
本篇博客灵感来自http://blog.csdn.net/chenssy/article/details/13170015 问题描述.问题出现的原因.尝试解决办法,请参见鄙人上一编博客. 上一编文章解 ...
- 黑马程序员——java基础之文件复制
---------------------- ASP.Net+Unity开发..Net培训.期待与您交流!---------------------- <a href="http:// ...
- dl dt dd标签
<dl>标记定义了一个定义列表,定义列表中的条目是通过使用<dt>标记(“definition title”,定义标题)和<dd>标记(“definition de ...
- 为net-snmp添加读readTimeTicks
function readTimeTicks(time){ if(time === 0) return ''; var d = 0, h = 0, m = 0, s = 0; d = parseInt ...
- 关于ASP.NET 中站点地图sitemap 的使用
在ASP.NET MVC 如此火热的时期,我竟然不适时宜的谈起ASP.NET ,恐怕会引来一阵嘲笑.最为无趣的是,讲解的竟然还是其中的一个控件.oh~~ my god!my out! ^_^ Si ...