浅谈CSS中position的定位技术

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

０引言
ｐｏｓｉｔｉｏｎ：ｂｓａｏｌｕｔｅ；ｂｏｔｔｏｍ：２０ｐｘ；ｉｆｇｈｔ：２０ｐｘ；／右下角定位／ｐｏｓｉｔｉｏｎ：ｂｓａｏｌｕｔｅ；ｂｏｔｔｏｍ：２０ｐｘ；ｌｅｆｔ：２０ｐｘ；／左下角定位｝／
固定定位与绝对定位ａｂｓｏｌｕｔｅ相似，定位后元素也生成为新块级盒框、覆盖新位置原有元素，在正常文档流中所占的原空间关闭一被后继元素使用。
技术研发
ＴＥＣＨＮｏＬｏＧＹＡＮＤＭ＿ＡＲＫＥＴ
Ｖｏ１．２２，Ｎｏ．６，２０１５
浅谈ＣＳＳ中ｐｏｓｉｔｉｏｎ的定位技术
党长青
（唐山学院电子信息系，河北唐山０６３０２１）
ＣＳＳ级联样式表是一种用来表现ＨＴＭＬ（标准通用标记语言的一个应用）或ＸＭＬ（标准通用标记语言的一个子集）等文
件样式的计算机语言。
绝对定位元素定位后相对祖先元素的位置不再变化，若页面内容较多拖动页面滚动时，定位元素会随页面一起滚动。绝对定位元素重叠覆盖其他元素时可用ｚ．ｉｎｄｅｘ属性设置它们的叠放次序。１）相对定位是让元素（可以是行内元素）相对于它在正常文档流原位置按ｌｅｔ、ｆｉｆｇｈｔ、ｔｏｐ和ｂｏｔｔｏｍ偏移量移动到新位置。２）相对定位的元素移动后保持原外观样式大小、移动定位
后不会占据新空间会覆盖新位置原有元素，原位置空间被保
留，其他元素相对它原来的位置不变。３）ｌｅｔｆ、ｒｉｇｈｔ、ｔｏｐ和ｂｏｔｔｏｍ指定相对原位置移动的偏移量，可以使用带单位数值、相对父元素的百分比％。ｌｅｔ正值：ｆ左边向内一向右移动，负值：左边向外一向左。
例如：ｐｏｓｉｔｉｏｎ：ｒｅｌａｔｉｖｅ；ｌｅｆｔ：５０ｐｘ；ｂｏｔｔｏｍ：５０ｐｘ。
３固定定位：ｏｓｐｉｔｉｏｎ：ｉｆｘｅｄ
个新的块级元素，如果未指定宽度高度默认自适应实际包含
特点，从属性的分类入手进行分析，详尽的描述了它们的功能。
关键词：绝对定位；相对定位；固定定位
ｄｏｉ：１０．３９６９／ｊ．ｉｓｓｎ．１００６— ８５５４．２０１５．０６．１２５
的表现设计语言。
能够对网页中的对象的位置排版进行像素级的精确控制，支持２相对定位：ｏｓｐｉｔｉｏｎ：ｒｅｌａｔｉｖｅ
百度文库
而网页中元素的定位则是ＣＳＳ中的重中之重。使用ｐｏｓｉ —
ｔｉｏｎ定位有四种方式，分别为ｒｅｌａｔｉｖｅ、ａｂｓｏｌｕｔｅ、ｓｔａｔｉｃ、ｉｆｘｅｄ，ｓｔａｔｉｃ
ＣＳＳ最新版本为ＣＳＳ３，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统ＨＴＭＬ的表现而言，ＣＳＳ几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀
’
１）绝对定位是将元素依据已经定位（绝对、固定或相对定位）的离它最近的祖先元素进行定位，祖先元素没有定位或没有祖先元素则默认依据ｂｏｄｙ浏览器窗口定位。２）绝对定位的元素不论本身是什么类型，定位后都将成为
一
ｂｏｔｔｏｍ正值：下边向内一向上移动，负值：下边向外一向下。例如：ｌｅｔ：ｆ２０ｐｘ；元素左边框右移２０像素。ｌｅｔ：ｆ一２０ｐｘ；元素左边框左移２０像素。
摘要￣ｐｏｓｉｔｉｏｎ定位是网页设计中的精准定位技术。ｐｏｓｉｔｉｏｎ属性规定元素的定位类型。这个属性定义建立元素布局所
用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级元素，但是不同的定位方式有不同的作用及
的内容区域（不再默认浏览器宽度）。
３）绝对定位后的元素将处于浮于其他元素之上，自身不占
位，它原来在正常文档流中所占的空间同时被关闭，就是说绝对定位的元素不占据页面空间，原空间被后继元素使用。
绝对定位必须用ｌｅｔｆ、ｒｉｇｈｔ、ｔｏｐ、ｂｏｔｔｏｍ属性之一激活，用于
ｉｆｇｈｔ正值：右边向内一向左移动，负值：右边向外一向右。ｔｏｐ正值：上边向内一向下移动，负值：上边向外一向上。
是静态定位，也为系统自动定位。下面主要分析其他三种定位
方式的特点。
１绝对定位：ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ