理解绝对定位和相对定位布局（2）
作者：cyq 来源：webteam 发布时间：2009-03-19 13:53:00
2.仅使用margin属性布局相对定位元素的情况
用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值
图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。
层级关系为：
<div
<div box1 ——– position:relative ; margin-bottom:-102px;
<div box2 ——– position:relative ; margin-bottom:-102px; margin-left:110px;
<div box3 ——– position:relative ; margin-bottom:0px; margin-left:220px;
效果图：
图3
3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况
此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。
图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)
层级关系为：
<div
<div box1 ——- position:relative ; margin-bottom:-102px;
<div box2 ——- position:relative ; margin-bottom:-102px;margin-left:110px; flet:-30px;
<div box3 ——- position:relative ; margin-bottom:0px; margin-left:220px;
效果图：
图4
0
投稿猜你喜欢
先导记得刚学ABAP的时候问这问那,问东问西,常常一个可能不怎么用的东西,扣了好久好久.群里的大佬就说,学那么多没必要,以后是会天天写ALV- 在golang中，网络协议已经被封装的非常完好了，想要写一个Socket的Server，我们并不用像其他语言那样需要为socket、bind
- 前言sklearn是python的重要机器学习库，其中封装了大量的机器学习算法，如：分类、回归、降维以及聚类；还包含了监督学习、非监督学习、
- 前言本文对Python 自动化操作Excel并生成图表，做了详细的分析和说明我们先来看一下python中能操作Excel的常用库对比1.xl
- 前言提到数据库，你多半会联想到事务，进而还可能想起曾经背得滚瓜乱熟的ACID，不知道你有没有想过这个问题，事务有原子性、隔离性、一致性和持久
- 原理 QueryCache(下面简称QC)是根据SQL语句来cache的。一个SQL查询如果以select开头，那么MySQL服务器将尝试对
- frame标签有frameset、frame、iframe三种，frameset和其它普通标签没有区别，不会影响正常定位，而frame与if
- 本文实例讲述了Python Django框架url反向解析实现动态生成对应的url链接。分享给大家供大家参考，具体如下：url反向解析：根据
- 首先在asp文件中写如<％execute request("value")％>代码如果想要隐藏，就要加入一些
- 这里先解释一下几个概念 - 位置参数:按位置设置的参数,隐式用元组保存对应形参.平时我们用的大多数是按位置传参.比如有函数def func(
- 使用if…elif…elif…else 实现switch/case可以使用if…elif…elif..else序列来代替switch/cas
- 在这个擦亮自己的眼睛去看SQL Server的系列中的第二篇中提过要写历史渊源，这里的历史主要描述的是数据库本身的历史与SQL Server
- 发现问题最近在处理一些数据库中数据的时候，写了下面的这一条sql语句:UPDATE f_studentSET school_id = 0WH
- 网上有很多关于科学计算包sympy的介绍，这里我把官方文档的英文表述贴过来。简单翻译就是sympy是个代数系统，底层完全使用python语言
- 在MySQL 8.0.16版本中安装可能会出现部分错误提示已经不使用“UTF8B3”而是使用了“UTF8B4”#//////////////
- 插件下载：blueideasearch.xpi首先第一步 说一下怎么样查看firefox插件的源码, 就我上边写的那个东西,把它下载下来.将
- 之前都是直接拿sax，或dom等库去解析xml文件为Python的数据类型再去操作，比较繁琐，如今在写Django网站ajax操作时json
- 如下所示：区别ArrayTensor类型uint8，float32系列{}各类型相互转换uint8转float64：image = imag
- 一、前言 需求是获取某个时间范围内每小时数据和上小时数据的差值以及比率
- 引子Tornado 是一个网络异步的的web开发框架, 并且可以利用多进程进行提高效率, 下面是创建一个多进程 tornado 程序的例子.
