css position属性.pdfVIP

css position 属性 说明 Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。 主要的值 ①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素 (postion 不为 static) ，否则为Body 文档本身。 ②relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位 置为此元素原先在文档流的位置。 ③fixed ：固定定位；类似于absolute ，但不随着滚动条的移动而改变位置。 ④static ：默认值；默认布局。 辅助属性 position 属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static 不支 持这些) ： ①left ：表示向元素的左边插入多少像素，使元素向右移动多少像素。 ②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。 ③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。 ④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。 上面属性的值可以为负，单位：px 。 position 定位方式 position:absolute 说明 绝对定位 ；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion 不为 static) ， 否则为 Body 文档本身。 1 / 6 视图 position:relative 说明 相对定位 ；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在 文档流的位置。 视图 2 / 6 position:fixed 说明 固定定位 ；类似于absolute ，但不随着滚动条的移动而改变位置。 视图 应用场景 ①登录框覆盖层：如 dz 论坛的登录。 ②虚假 QQ 消息广告。 position:static 说明 默认定位 ，表示此元素为默认定位方式。 应用场景 IE6 的特殊处理。 总结 滚动条是否出现 当含有 position 属性的元素为最边缘元素时： ①absolute 和 relative ：含有此2 个值的边缘元素，浏览器缩小到此元素不可见时，会出现滚动条。 3 / 6 ②fixed ：含有此值的边缘元素，浏览器缩小到此元素不可见时，不会出现滚动条。 示例 代码 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns =/1999/xhtml head title position/title style type=text/css div { height: 200px; width: 300px; border-color: Black; border-style: solid; border-width: 1px; } #a { position:absolute; left:900px; 4 / 6 top:150px; } #b { position:relative;