下面的定义是我在51cto中摘抄的。
static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
这里只是实验了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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
*{margin: 0px;padding:0px;}
#all{height:700px;width:500px;margin-left:20px;background-color:#eee;}
#fixed1,#fixed2,#fixed3,#fixed4,#fixed5{width:120px;height:50px;border:5px double #000;position:absolute;}
#fixed1{background-color:#9c9;}
#fixed2{top:20px;left:50px;background-color:#9cc;}
#fixed3{bottom:10px;left:50px;background-color:#9cc;}
#fixed4{top:10px;right:50px;z-index:10;background-color:#9cc;}
#fixed5{top:20px;right:90px;z-index:9;background-color:#9c9;}
#a,#b,#c{width:300px;height:100px;border:1px solid #000;background-color:#ccc;}
</style>
</head>
<body>
<div id="up" style="width:100%;height:100px;border:3px solid #009; background-color:#CC3">
</div>
<div style="position:absolute;width:100%;height:100px;border:3px solid #009; background-color:#F39">
红色的div
</div>
<div id="all">
<div id="a" style="z-index:1000;">第1个无定位的div容器,被红色绝对定位的div遮盖了</div>
<div id="fixed1">第1个固定的div容器</div>
<div id="fixed2">第2个固定的div容器</div>
<div id="fixed3">第3个固定的div容器</div>
<div id="fixed4">第4个固定的div容器</div>
<div id="fixed5">第5个固定的div容器</div>
<div id="b">第2个无定位的div容器</div>
<div id="c">第3个无定位的div容器</div>
</div>
<input type="button" value="点击隐藏最上面的div"/>
<script type="text/javascript">
$(function(){
$("input").click(function(){
$("#up").hide();
});
});
</script>
</body>
</html>
红色的div定位属性是绝对定位的,那么它就在原本的文档流里面脱离出来了,不在占用原来的位置,它后面的兄弟块就会占用它原来的空间。表现形式就是后面的内容提上来了。如图所示:红色的div把第1个无定位的div容器遮盖掉了。
可以给块级设置偏移位置,上图中的5个小一点的div可以在页面中的任意位置。他们都不处在原来的文档流中了。
现在来实验这个绝对定位的偏移位置是相对于那个块来定义的。
更改id为all的div的样式,如:<div id="all" style="position:absolute;">。
如图,all块级元素和红色的块级元素重叠了,他们的上下位置是根据z-index来确定的。
下面来看看那5个小一点的绝对定位的div的位置,和第一幅图比较他们都处在了all块级元素的内部了。
哈哈,到这里就可以来总结一下absolut的一些特点了。
他脱离了原来的文档流,不占用原来文档流的空间。脱离出来后他们后面的基本会计元素就会上体来填补原来的位置。
如果不设置left、top、bottom等属性,他们的位置因该处于他们前面的普通块级元素的下面,就如第二副图给出的位置,他们在黄色的div的下面。
如果设置了left等属性,那么他们的位置就分两种情况:
第一种)寻找他们的父元素(父元素设置了position属性),他们的位置就相对于这个父div来确定的。
第二种)如果没有找到一个父元素设置了position属性,那么他们就关于body元素来确定他们的位置。
- 大小: 37.1 KB
- 大小: 41.4 KB
分享到:
相关推荐
前言 这是我在这个网站整理的笔记,接下来还会持续更新。 ...作者:RodmaChen 转载说明:务必注明来源,附带本人博客连接。... 绝对定位——Absolute Position6.自我总结,代码效果 一.显示属性——display 1.块元素—
4.2.3 absolute(绝对定位) 4.2.4 fixed(固定定位) 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第 6章 链接与导航 第7章 竖直排列的导航...
4.1.8 实验7——使用clear属性清除浮动的影响 4.1.9 实验8——扩展盒子的高度 4.2 盒子的定位 4.2.1 static(静态定位) 4.2.2 relative(相对定位) 4.2.3 absolute(绝对定位) 4.2.4 fixed(固定...
宣传视频页面运用了滑动特效,视频盒子绝对定位,溢出隐藏,scale缩小等技术;照片墙用了固定定位,过渡效果var函数并且运用了伪类选择器来实现复选框默认被选中技术;角色情报对其中的文字介绍进行了绝对定位和溢出...
4.2.3 absolute(绝对定位) 4.2.4 fixed(固定定位) 4.3 z-index空间位置 4.4 盒子的display属性 4.5 本章小结 第5章 文字与图像 …… 第6章 链接与导航 第7章 竖直排列的导航菜单 第8章 水平...
1.6.5 学习CSS布局比表格困难吗 1.6.6 CSS布局是否意味着必须手写代码 1.6.7 什么叫网站重构 1.6.8 使用Web标准之后就不再存在兼容性问题了吗 1.6.9 有没有Web标准方面的优秀图书或网站 1.6.10 使用CSS设计只能做出...
如下: ———————————————————— 头 ———————————————————— 身 ———————————————————— 脚 ———————————————————— 要求:1、头脚等高,...
4.20 绝对定位面板——AbsolutePanel 4.21 停靠面板——DockPanel 4.22 展开面板——DisclosurePanel 4.23 标签面板——TablePanel 4.24 水平拆分面板——HorizontalSplitPanel 4.25 垂直拆分面板——...
本次设计魅族官网主要运用了HTML和CSS,为方便检查代码,style采用link进行引入,总体设计思想采用大盒子包括小盒子进行。...能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。
如今,接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说,做一个简单的布局只需要依赖两样东西:div与CSS。因此有人称CSS布局为div+css布局。 3.1.2 如何使用div 只需要应用<di
前端——基础css学习
如月姑娘(本届D2上微博中奖上台最漂亮的那位)的内部分享会——关于CSS3 background相关内容~~……一顿巴拉巴拉…… 如月:假设背景图片500px*500px,则应用background-size:50%后,显示的背景图片大小就是250px*...
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV CSS制作方法,jb51.net也成为了CSS网页布局技术学习的先锋站点,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。 如今大部分...
定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。 由于外层是position:relative,所以里层是absolute的话,则会...
—————————————————— 文章或者技巧及原始作者或出处: 正则表达式类 【1】 正则表达式应用——替换指定内容到行尾 【2】 正则表达式应用——数字替换—————————-Microshaoft,jiuk2k 【3】...
dispaly转换元素,浮动,以及清除浮动,和自适应以及定位锚点,固定和绝对定位,黏性定位,和表格的特点,属性以及利弊等
绝对位置: 1.外层没有position:absolute(或relative);那么div相对于浏览器定位,如下图中b(距离浏览器右边框为50像素,距离下边框为20像素)。 2.外层有position:absolute(或relative);那么div相...