理解绝对定位和相对定位布局(3)
作者:cyq 来源:webteam 发布时间:2009-03-19 13:53:00
二、用绝对定位布局块级元素
设置position值:position:absolute;
此属性值的设置,元素从文档流完全删除。
1.仅使用left、right、top和bottom属性布局绝对定位元素的情况
绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素,那么它的参照物为最顶级元素(由于浏览器的默认参照物不同,物可能是BODY或 HTML 元素)。
注意:IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。
设置元素为绝对定位元素后,元素的Left、 Right、Top和Bottom属性默认值不是0,只是将元素脱离文档流。以下例子说明这个问题。
在图5中,将橘黄色的祖先元素设置为定位元素(即参照物),box2设为绝对定位,文档流由box1-box2-box3变为box1-box3,可box2却没有移动到距离参照物0值的位置上,可见box2的Left、 Right、Top和Bottom属性默认值不等于0,它只是脱离了文档流而已。
层级关系为:
<div ———————————position:relative 参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–absolute
<div box3
效果图:
图5
以最近的祖先定位元素为参照物的情况
图6中,Box2设置成绝对定位元素,脱离了文档流,文档流由box1-box2-box3变为box1-box3,box2以最近的定位祖先(蓝色框)为参照物。
层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
图6
图7中,为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
图7
图8中,参照物为最顶级的元素情况。
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
图8


猜你喜欢
- 随机漫步生成是无规则的,是系统自行选择的结果。根据设定的规则自定生成,上下左右的方位,每次所经过的方向路径。首先,创建一个RandomWal
- 最近写了个python抓取必应搜索首页http://cn.bing.com/的背景图片并将此图片更换为我的电脑桌面的程序,在正则匹配图片ur
- 前提示时间一个博友,建议我提供PHP开发环境的搭建文章。当然我们一般在windows平台下开发的居多,那么,今天我就在Windows平台下搭
- Django中集成jquery首先,静态的资源通常放入static文件夹中:static/ css/
- python自带日志管理模块logging,使用时可进行模块化配置,详细可参考博文Python日志采集(详细)。但logging配置起来比较
- 说明Python语言中列表(List)与其他语言的数组(Array)类似,是一种有序的集合数据结构,Python List可支持各种数据类型
- requests安装和使用下载安装:pip install requests#requests模块import requests#发送请求
- matplotlib的依赖包cycler是matplotlib自主开发的属性组合包,功能与内置模块itertools很多函数非常相似,可用于
- 基本原理选好画板大小,设置好画笔颜色、粗细,定位好位置,依次画鼻子、头、耳朵、眼睛、腮、嘴、身体、手脚、尾巴,完事儿。都知道,T
- 如何正确理解MIME类型?mime联系介绍。序号内容类型文件扩展名描述1application/msworddocMicrosoft Wor
- 这两天做基于 Flash9(ActionScript 3.0)的 JavaScript PHPRPC 3.0 客户端时遇到了一些 JavaS
- 分页:/*分页查找数据*/ CREATE PROCEDURE [dbo].[GetRecordSet] @strSql varchar(80
- 本文为大家分享了MySQL预编译功能,供大家参考,具体内容如下1、预编译的好处大家平时都使用过JDBC中的PreparedStatement
- 一、什么是星号变量最初,星号变量是用在函数的参数传递上的,在下面的实例中,单个星号代表这个位置接收任意多个非关键字参数,在函数的*b位置上将
- 在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'d
- 原理采用Python requests发起请求监测的URL,检测Http响应状态及是否超时,如果Http状态异常或响应超时,则通过聚合云推的
- 1.安装登陆确认mysql已经开启2.建库3.建表Create 数据库表右击选择Create Table,填写Table Name,Comm
- tensorFlow中主要包括了三种不同的并行策略,其分别是数据并行、模型并行、模型计算流水线并行,具体参考Tenssorflow白皮书,在
- 有时候需要制造一些测试的数据,以mysql官方给的测试库为基础,插入十万,百万或者千万条数据。利用一些函数和存储过程来完成。官方给的测试库地
- 如何用ASP发送带附件的邮件?请问如何用CDONTS组件发送带附件的邮件? 见下列代码:<%&nb