<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Div + CSS Example, Wayhome's Blog</title> <style type="text/css"> <!-- body,td,th{font-family:Verdana;font-size:9px;} --> </style></head> <body> <div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;"> position: absolute;<br /> top: 5px;<br /> right: 20px;<br /> <div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;"> position: absolute;<br /> left: 20px;<br /> bottom: 10px;<br /> </div> </div> <div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;"> position: absolute;<br /> top: 5px;<br /> left: 5px;<br /> </div> <div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;"> position: relative;<br /> left: 150px;<br /> <br /> width: 300px; height: 50px; <br /> </div> <div style="text-align:center; background:#ccc;"> <div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <div style="padding:20px 0 0 20px; background:#FFFF00;"> padding: 20px 0 0 20px; <div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div> <div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;"> position: <span style="color:blue;">relative</span>;<br /> left: 200px;<br /> <br /> width: 300px;<br /> height: 300px;<br /> <div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;"> position: absolute;<br /> top: 20px;<br /> right: 20px;<br /></div> <div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;"> position: absolute;<br /> bottom: 20px;<br /> left: 20px;<br /> </div> </div> </div> </div> </div> </body> </html> absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top、Right、Bottom、Left 的情况,默认依据父级的“内容区域原始点”为原始点,上面例子红色部分(父级黄色区域有 Padding 属性,“坐标原始点”和“内容区域原始点”不一样)。 2. 有设定 Top、Right、Bottom、Left 的情况,这里又分了两种情况如下: (1). 父级没 position 属性,浏览器左上角(即 Body)为“坐标原始点”进行定位,位置由 Top、Right、Bottom、Left 属性决定,上面例子绿色部分。 (2). 父级有 position 属性,父级的“坐标原始点”为原始点,上面例子浅蓝色部分。 relative:相对定位,CSS 写法“ position: relative; ”,参照父级的“内容区域原始点”为原始点,无父级则以 Body 的“内容区域原始点”为原始点,位置由 Top、Right、Bottom、Left 属性决定,且有“撑开或占据高度”的作用,上面例子橙色部分。 通过上面的例子和讲解,相信熟练运用 absolute 与 relative 并不是一件很困难的事,我们周围有不少关于 absolute 与 relative 的好例子,比如“网易163免费邮”首页(http://mail.163.com),里面就有大量的运用。
css absolute与relative的区别的更多相关文章
-
Div CSS absolute与relative的区别小结
absolute:绝对定位,CSS 写法“ position: absolute; ”,它的定位分两种情况,如下: 1. 没有设定 Top.Right.Bottom.Left 的情况,默认依据父级的“ ...
-
Position属性四个值:static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
-
css中的position 的absolute和relative的区别(转)
我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...
-
css 布局absolute与relative的区别
absolute:当使用时,表示在文档流中没有实际存在位置(浮动),在不设置任何方位值时,只能按兵不动,当设置了方位值之后,会紧接着去寻找距离最近的能够将它包含住的父级元素,然后进行定位. relat ...
-
position属性absolute与relative 的区别
连接:https://www.cnblogs.com/duyanli/p/3534005.html 每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以 ...
-
CSS absolute与relative不得不说的故事
写在开篇: absolute说:“relative,我这辈子都不想看见你!” 为什么呢?它们明明那么相亲相爱,形影不离,这之中到底发生了什么不为人知的故事,竟然让absolute如此讨厌relativ ...
-
Position属性四个值:static、fixed、absolute和relative的区别
1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对 ...
-
CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
-
css absolute和float,relative,z-index的同异
大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录 ...
随机推荐
-
UVA 10795 新汉诺塔问题
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
-
Android中的requestWindowFeature
朋友推荐使用博客记录工作中的难点以及常犯的错误,仅作为笔记,首先整理之前的工作日志. requestWindowFeature(featrueId),它的功能是启用窗体的扩展特性: 注意:该方法必须放 ...
-
NEON简介【转】
转自:http://blog.csdn.net/fengbingchun/article/details/38020265 版权声明:本文为博主原创文章,未经博主允许不得转载. “ARM Advanc ...
-
如何设置table中<;tr>;和<;td>;的高度
//-----------------自定义表格table的行和列的宽和高----------------------// 先设置一个样式 如下: <style type="text/ ...
-
管道寄售库存MRKO结算后,冲销问题
管道寄售库存MRKO结算后,冲销问题 1.通常使用MIRO对采购订单进行发票校验后,若发现校验错误,直接使用MR8M取消发票校验,同时手工F-03对借发票校验借方GRIR和取消发票校验的贷方GRIR进 ...
-
写过的HTML标签(一)
HTML > 标题显示字体大小为<h1>. HTML 段落是通过标签 <p> 来定义的. HTML 链接是通过标签 <a> 来定义的. 实例: < ...
-
Myeclipse它显示了一个目录的结构,而不是包
今天Myeclipse新project,编写代码,查找workspace空间展示project在包装和class所有平行结构,看的很不顺,有两个原因,第一,您可能无法切换到Package worksp ...
-
增强遍历和Object多参数遍历
public class T2 { public void t1(Object o){//Object是任何类型,多态 System.out.println(o.toString()); } publ ...
-
SpringBoot 通过token进行身份验证,存储redis
代码: public interface TokenManager { /** * 创建token * @param userInfo * @return */ String getToken(Use ...
-
MyBatis高级映射查询(3)
一.数据库数据和项目搭建过程 1.主要要四张表,分别为user用户信息表.items商品表.orderdetail订单明细表.orders订单表.表的结构和数据如下: 表结构 CREATE DATAB ...