position属性的定位主要的值有哪些 办法有几种
|
今天这篇我们来学习和了解“position属性的定位主要的值有哪些，方式有几种”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“position属性的定位主要的值有哪些，方式有几种”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！ 说明 Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。 主要的值 absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。 static ：默认值；默认布局。 辅助属性 position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)： left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。 right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。 top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。 bottom：表示向元素的下方插入多少像素，使元素向上移动多少像素。 上面属性的值可以为负，单位：px 。 position 定位方式 position:absolute 说明 绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。 position:relative 说明 相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 position:fixed 说明 固定定位；类似于absolute，但不随着滚动条的移动而改变位置。 应用场景 登录框覆盖层：如dz论坛的登录。 虚假QQ消息广告。 position:static 说明 默认定位，表示此元素为默认定位方式。 应用场景 IE6的特殊处理。 总结 滚动条是否出现 当含有position属性的元素为最边缘元素时： absolute 和relative ：含有此2个值的边缘元素，浏览器缩小到此元素不可见时，会出现滚动条。 fixed ：含有此值的边缘元素，浏览器缩小到此元素不可见时，不会出现滚动条。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/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; top:150px; } #b { position:relative; left:500px; top:100px; } #c { position:fixed; left:970px; top:400px; } #d { position:static; background-color:Window; } </style> </head> <body> <div id="a" > div-a<br /> position:absolute;<br /> 绝对定位；脱离文档流，遗留空间由后续元素填充。 </div> <div id="b" > div-b<br /> position:relative;<br /> 相对定位；不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。 </div> <div id="c" > div-c<br /> position:fixed;<br /> 固定定位；固定在页面中，不随浏览器的大小改变而改变位置。 </div> <div id="d"></div> <input type="text" value="input1" /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body> </html> 到此，关于“position属性的定位主要的值有哪些，方式有几种”的学习就结束了，希望能够解决大家的疑惑，另外大家动手实践也很重要，对大家加深理解和学习很有帮助。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
