理解绝对定位和相对定位布局（4）
作者：cyq 来源：webteam 发布时间：2009-03-19 13:53:00
标签：css,布局,相对定位,绝对定位,网页重构
2.仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图：
图9
IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。
层级关系为：
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图：
图10
0
投稿猜你喜欢
今天我想和大家分享 4 个省时的 Python 技巧，可以节省 10~20％ 的 Python 执行时间。反转列表Python 中通常有两种- python 列表和链表的区别python 中的 list 并不是我们传统意义上的列表，传统列表——通常也叫作链表(linked list)
- 前言：之前，我写笔记的工具一直都是 notion，而且没有写博客的习惯。但是一是由于 notion 的服务器在
- 1、说明这篇文章是帮一个群友解答的问题。他有一个需求，就是对于日期的录入都是中文形式的，需要转换为数字形式的。由于python库中没有函数直
- 前言pygame是用来开发游戏的一套基于SDL的模板，它可以是python创建完全界面化的游戏和多媒体程序，而且它基本上可以在任何系统上运行
- 按照本文操作和体会，会对sql优化有个基本最简单的了解，其他深入还需要更多资料和实践的学习： 1. 建表： 代码如下:creat
- modelform是model衍生出来的form .modelform的用法非常死.首先在models.py里创建模型表.所有的form组件
- 今天群上面同志们在讨论css3内发光效果，自己也就研究一下，写了个效果出来，涉及css3投影，渐变，蒙版，伪类等知识点，现在写下设计思路，仅
- Python程序可以处理多种方式的日期和时间。日期格式之间的转换是一种常见计算机的杂活。 Python的时间和日历模块，能帮助处
- 1.删除序列相同元素并保持顺序如果仅仅就是想消除重复元素，通常可以简单的构造一个集合，利用集合之间元素互不相同的特性就可以消除重复，但是这种
- 作者：AngelGavin 出处：CSDN一般问题什么是 XML？可扩展标记语言 (XML) 是 Web 上的数据通用语言。它使
- 目录一、简单字段定义1、定义 Schema 并生成 Parquet 文件2、验证 Parquet 数据文件二、含嵌套字段定义1、验证 Par
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 对象测量概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.
- HTTPX是Python3的功能齐全的HTTP客户端，它提供同步和异步API，并支持HTTP/1.1和HTTP/2安装pip install
- 关于阻塞主线程join的错误用法Thread.join() 作用为阻塞主线程,即在子线程未返回的时候,主线程等待其返回然后再继续执行.joi
- 问题你需要将一个Python对象序列化为一个字节流，以便将它保存到一个文件、存储到数据库或者通过网络传输它。解决方案对于序列化最普遍的做法就
- 在某些特殊情况下，我们的 Python 脚本需要调用父目录下的其他模块。例如：在编写 GNE 的测试用例时，有一个脚本 generate_n
- 1、es的批量插入这是为了方便后期配置的更改，把配置信息放在logging.conf中用elasticsearch来实现批量操作，先安装依赖
- 代码如下:'===================================== '获得文件后缀 '=====
- 双击编辑功能如何实现：例如：标题 （鼠标双击“标题”文字 即出现可编辑的输入框形式及提交按钮） <!D
