- 1、本文档共3页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Positive属性使用方法
Positive属性的使用方法:
Body是最顶级的父容器。
子容器是父容器的内容。
对于absolute与relative,子容器的左边框与父容器的距离=left的值+margin-left的值。
Absolute:位置对于父容器而言,他的位置(left、top)可以通过拖动图形宽度、高度,移动图形调节;与relative相比,在视图窗口中他的位置、大小是可以改变的。
Relative:位置对于父容器而言,他的位置(left、top)、大小有一开始设计的图形控制,不可以在视图窗口中调节。
Fix与Static:它的top,left值无效;如要调节子容器的位置:可通过改变父容器(除了body)的margin的值。在决定子容器的位置关系时,可改变父容器的Padding 属性的值。子容器的margin的值无效。
Static :默认值为static属性,left和top没有起作用,一直跑到最上面去了Fixed:直接以浏览器窗口开始计算left和top的值红色(red)和蓝色(blue)分别是absolute和relative他们都是从父对象开始计算left和top的值,只是因为有一个是absolute所以产生了重叠效果,没有被另外一个挤走。同时我也明白了另外一个道理,因为默认的类型都是static,所以当我们的页面长度等定位的不合理时一个会把一个挤走。
TRBL)(前提是父对象的position不是relative,否则则以父对象为准)
没有设定TRBL,默认依据父级的做标原始点为原始点。
如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
父级的原始点为原始点,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位无父级则以BODY的原始点为原始点,配合TRBL进行定位,。position的四种取值static:static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定
fixed:fixed才是真正的绝对定位,其位置永远相对浏览器位置来计算。而且就算用户滚动页面,元素位置也能相对浏览器保持不变,也就是说永远可以看到,这个做一些彩单的时候可以用。可惜的是ie还不支持relative:relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了。
absolute:absolute绝对定位,直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。它的坐标是相对其容器来说的。容器又是什么呢,容器就是离元素最近的一个定位好的“祖先”,定位好的意思就是其Position是absolute或fixed或relative。如果没有这个容器,那就使用浏览器初始的,也就是body或者html元素。标准是说只需要指定left和right,width可以自动根据容器宽度计算出来,可惜ie不支持。
div id=main div id=nav/div div id=content/div/div
1. Abbolute排版中:top, left, right, bottom 是子元素和父元素的关系, 例如 nav和main 就是这种关系。margin 是两个相连的元素(div)之间的间隙关系。margin 规定了自己和周围元素之间的距离。padding 是元素内部内容和自己的边框的间隙关系。
Relative 排版中:top, left, right, bottom 是元素之间关系, 例如 nav和content 就是这种关系。margin 是子元素和父元素的关系, 例如 nav和main 就是这种关系。padding 是元素内部内容和自己的边框的间隙关系。
比如:div class=1/divdiv class=2/div
当1固定了位置。1的样式float:left;width:100px; height:800px;
2的样式为float:left; position:relative;margin-left:20px;width:50px;
2的位置在1的右边,距离120px 假如有两个div
Java代码
div id=parent
div id=son/div
/div
div有left和top属性,是用来定位的.如果内层的div的position属性是absolute.那他就是相对于文档的左上角的位置..如
您可能关注的文档
- OX游戏介绍2012–05–07.doc
- p58–66第10章建筑施工图的识读.doc
- Oracle10g学习笔记之Scott的所有表结构和字段含义.doc
- PageRank让链接来)投个票).doc
- parlayx技术浅析和其在ngn中的应用.doc
- PADS90新增无模命令Z.doc
- PartVTwentieth–centuryLiterature–F.Scott.Fitzgerald.doc
- Pascal基本教程–第二章pascal语言基础知识.doc
- P2P网贷理财入门知识〔前海理想金融〕.docx
- PCB堆叠的1些基础知识.doc
- 《GB/T 12668.7202-2024调速电气传动系统 第7-202部分:电气传动系统的通用接口和使用规范 2型规范说明》.pdf
- 《GB/T 15692-2024制药机械 术语》.pdf
- GB/T 15692-2024制药机械 术语.pdf
- 中国国家标准 GB/T 15692-2024制药机械 术语.pdf
- GB/T 19633.1-2024最终灭菌医疗器械包装 第1部分:材料、无菌屏障系统和包装系统的要求.pdf
- 中国国家标准 GB/T 19633.1-2024最终灭菌医疗器械包装 第1部分:材料、无菌屏障系统和包装系统的要求.pdf
- 《GB/T 19633.1-2024最终灭菌医疗器械包装 第1部分:材料、无菌屏障系统和包装系统的要求》.pdf
- 《GB/T 30117.1-2024非相干光产品的光生物安全 第1部分:通用要求》.pdf
- 《GB/T 33348-2024高压直流输电用电压源换流器阀 电气试验》.pdf
- GB/T 33348-2024高压直流输电用电压源换流器阀 电气试验.pdf
文档评论(0)