收藏本站帮助飘仙建站网侵权投诉
切换到宽版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

飘仙建站论坛»论坛 › 源码cms建站学习交流区 › 网页制作设计交流 › position两三事
返回列表 发新帖
查看: 2116|回复: 4

[教程] position两三事

[复制链接]
mseed
发表于 2012-4-16 09:13:51 | 显示全部楼层 |阅读模式 来自 中国–江苏–南京
position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。所以实际上可用的值只有3个 为了方便阅读~
以下统称为：固定(fixed)、相对(relative)、 绝对(absolute).
第1：固定定位(fixed)
固定定位可以让某一元素固定在屏幕的某个位置.其效果和背景的background-attachment:fixed属性相似！但是IE6以及更早的版本不支持.所以以下例子请在非IE6以下浏览器下浏览
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style>
  8. *{margin:0;padding:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div>
  13. <br />换行
  14. <br />换行
  15. <br />换行
  16. <br />换行
  17. <br />换行
  18. <br />换行
  19. <br />换行
  20. <br />换行
  21. <br />换行
  22. <br />换行
  23. <br />换行
  24. <br />换行
  25. <br />换行
  26. <br />换行
  27. <br />换行
  28. <br />换行
  29. <br />换行
  30. <br />换行
  31. <br />换行
  32. <br />换行
  33. <br />换行
  34. <br />换行
  35. <br />换行
  36. <br />换行
  37. <br />换行
  38. <br />换行
  39. <br />换行
  40. <br />换行
  41. <br />换行
  42. <br />换行
  43. <br />换行
  44. <br />换行
  45. <br />换行
  46. <br />换行
  47. <br />换行
  48. <br />换行
  49. <br />换行
  50. <br />换行
  51. <br />换行
  52. <br />换行
  53. <br />换行
  54. <br />换行
  55. <br />换行
  56. <br />换行
  57. <br />换行
  58. <br />换行
  59. <br />换行
  60. <br />换行
  61. <br />换行
  62. <br />换行
  63. <br />换行
  64. <br />换行
  65. </body>
  66. </html>
复制代码
第2：相对定位(relative)
相对定位是依据设置定位属性的4个方向上的任意值来实现相对与其本来在文档中正常显示的位置的偏移；
当相对定位的元素偏移出其本来的文档流的位置：其他元素仍然认为那个位置为其的逻辑文档流区域.而不会去补上去，虽然我们感官上认为那里是没有东西的~
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="width:500px;background:#CC9900;height:30px">1</div>
  13. <div style="width:500px;background:#ff0000;height:30px;position:relative;left:10px;top:20px;">2</div>
  14. <div style="width:500px;background:#CC9900;height:30px">3</div>
  15. </body>
  16. </html>
复制代码
其中第2个色块就是相对于其本来的文档流中的位置依据left:10px;top:20px;的定位属性值进行偏移.
其后面的第3个色块依然认为前面的空白（就是第3的原本的文档流的位置）为第3个色块的文档流区域 则不会自动填充上去.
当相对定位的父元素出现滚动条时，IE浏览器的特殊情况
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="width:500px;height:150px;overflow:auto;">
  13. 我是正常文档流的文字
  14. <div style="width:300px;background:#ff0000;height:20px;position:relative;">我是相对定位，拉动滚动条 看我在那里</div>
  15. 我是正常文档流的文字<br />
  16. 我是正常文档流的文字<br />
  17. 我是正常文档流的文字<br />
  18. 我是正常文档流的文字<br />
  19. 我是正常文档流的文字<br />
  20. 我是正常文档流的文字<br />
  21. 我是正常文档流的文字<br />
  22. 我是正常文档流的文字<br />
  23. 我是正常文档流的文字<br />
  24. 我是正常文档流的文字<br />
  25. 我是正常文档流的文字<br />
  26. 我是正常文档流的文字<br />
  27. 我是正常文档流的文字<br />
  28. 我是正常文档流的文字<br />
  29. </div>
  30. </body>
  31. </html>
复制代码
当相对定位的父元素有滚动条的时候，该相对定位元素再IE的表现很诡异（其后面的元素依然认为那个位置为该元素的默认位置，而表现出相对定位的特性，但是拉动滚动条时，在FF下正常即相对定位的元素和文档一起滚动，但是在IE系列里面，相对定位的色块依然在原地不动，此时元素的特性有点像绝对定位）当相对定位同时拥有定位属性的4个方向的值和margin属性。相对定位的定位属性 top right bottom left和margin-top margin-right margin-bottom margin-left;各个方向上一至的时候其值会产生叠加效果，而按照方向执行叠加后的数值的偏移例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="height:50px;background:#f00;position: relative;left:100px;margin-left:-100px;">
  13. </div>
  14. </body>
  15. </html>
复制代码
未完见回复
浏览器, 可用的, 实际上, 滚动条, 左上角

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复

使用道具 举报

mseed
 楼主| 发表于 2012-4-16 09:18:13 | 显示全部楼层 来自 中国–江苏–南京
第3：绝对定位(absolute)当元素设置绝对定位后.则会从正常的文档流中脱离.其后面的元素会完全忽视这个绝对定位的元素.就好像正常文档流中不存在这个元素一样.然后根据离其最近的一个具有position属性的父对象的边缘为定位基点（如果没有没有这样一个父对象 那么默认依据窗口元素定位），根据设置定位属性的4个方向的值来实现绝对的定位布局.例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="width:500px;background:#CC9900;height:30px">1</div>
  13. <div style="width:500px;background:#ff0000;margin-top:1px;height:30px;position:absolute;left:10px;top:20px;">2</div>
  14. <div style="width:500px;background:#CC9900;height:30px">3</div>
  15. </body>
  16. </html>
复制代码
我们可以看到.当色块2设置绝对定位之后.后面的第3色块忽视其存在，自动填补到正常的文档流中（这个是根据窗口元素定位）我们再来看一下IE中依据窗口元素定位的一个特殊情况
例子：
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="author" content="aslen" />
  7. <meta name="Copyright" content="www.gongchang.com" />
  8. <style type="text/css">
  9. html{background: #0099FF;padding:100px;}
  10. body{color:#FFFFFF;background:#FF00FF;padding:100px;width:400px;position:relative;}
  11. .wapper{background:#FF6600;}
  12. .abso {width:200px; height:200px; border:1px #000 solid; position:absolute;left:0px;top:0px;background:#00FF00}
  13. </style>
  14. </head>
  15. <body>
  16. <div class="wapper">
  17. <br />
  18. <br />
  19. <br />
  20. <br />
  21. <br />
  22. <br />
  23. <br />
  24. <br />
  25. <br />
  26. <br />
  27. <br />
  28. <br />
  29. <br />
  30. <br />
  31. 此DEMO测试IE6的Quirks mode模式以及position定位参考的窗口元素
  32. <div class="abso">绝对定位</div>
  33. </div>
  34. </body>
  35. </html>
复制代码
此DEMO与position:absolute的定位工作方式无关~只是作为IE**殊的情况列出来除了上面的基本的position:absolute特点，其还有下面几点；1.如果我们只设置了position:absolute而没有设置定位属性的4个方向值的话.那么该绝对定位的元素依然遵循其在文档流中的正常位置，它仍然受前一元素的文档流位置影响，按照正常文档流进行布局。只不过现在是从正常的文档流中抽出.其后面的元素会忽视其存在.而自动补上去.因为绝对定位的元素是不占文档流的布局空间的。例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="width:500px;background:#CC9900;height:30px">1</div>
  13. <div style="width:200px;background:#ff0000;position:absolute;height:30px">2</div>
  14. <div style="width:500px;background:#CC9900;height:30px">3</div>
  15. </body>
  16. </html>
复制代码
例子中第2个红色的色块就是一个只具有position:absolute属性的元素，它仍然在正常的布局位置呈现，只不过后面的元素会忽视其存在2.绝对定位会自动把一个元素转化为块元素例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <span style="width:500px;background:#CC9900;height:30px;position:absolute">我们知道行间元素设置宽、高是被忽略的，你看看这个页面的显示</span>
  13. </body>
  14. </html>
复制代码
按照标准的渲染方式.行间元素设置的宽度和高度是被忽略的，但是当给元素绝对定位之后，该元素会具有块元素的特性，而可以设置宽度和高度（虽然绝对定位的元素不占布局空间）

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

mseed
 楼主| 发表于 2012-4-16 09:20:06 | 显示全部楼层 来自 中国–江苏–南京
3.在IE下没有设置定位属性4个方向的值的绝对定位的块元素的表现是inline-block 再FF下其是block
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. 这是一行正常的文字~我们知道只要是块元素 不管他的宽度多少 他始终是占一行的
  13. <div style="width:500px;background:#ff0000;position:absolute;height:30px;">我是一个具有绝对定位属性的块元素~你在IE下看我再那里，你再FF下看我再那里</div>
  14. </body>
  15. </html>
复制代码
这个其实是浏览器的差异，在FF下在块元素拥有position:absolute属性后，其依然作为一个块元素，而相对于前面的文档流而换行，所以为了统一，在这种使用情况下，可以加上display:inline即可保证各个浏览器统一
4.绝对定位元素依据其定位基点进行绝对定位时会忽视其定位基点的padding空间
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="padding:100px;width:500px; position:relative; background:#f00;height:500px;margin:0 auto">
  13. <div style="width:400px;background:#CC9900;height:30px;top:0;position:absolute">我是一个具有position属性；且定位属性为top:0px;你看我再那里</div>
  14. 我是正常文档流中的文字
  15. </div>
  16. </body>
  17. </html>
复制代码
图中的红色区域是一个高度和宽度为500px且padding:100px;因为绝对定位元素忽视其定位基点的padding属性，所以在顶部呈现
5.设置任何一个方向的定位属性.该绝对元素除该方向按照定位属性的值依据其具有position属性最近的父元素为基点进行定位.其另外方向上的逻辑位置依然受前一文档流中的元素影响.按照正常的位置进行布局：
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="width:500px;background:#CC9900;height:30px">1</div>
  13. <div style="width:500px;background:#ff0000;position:absolute;height:30px;left:40px;">我是一个具有绝对定位，且只有left:40px这个定位属性；你看再我那里</div>
  14. <div style="width:500px;background:#CC9900;height:30px">3</div>
  15. </body>
  16. </html>
复制代码
我们可以看到图中的红色区域，除按照left:40这个属性偏移40像素后，其垂直方向的位置依然为正常文档流中的位置
6.当元素设置为绝对定位后改元素内的浮动会自动清除
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. li{float:left;width:500px;height:40px;background:fuchsia; list-style:none}
  10. </style>
  11. </head>
  12. <body>
  13. <ul style="border:1px blue solid;width:500px;padding:50px;background:green;position:absolute">
  14. <li>我是浮动的元素</li>
  15. <li>我是浮动的元素</li>
  16. <li>我是浮动的元素</li>
  17. <li>我是浮动的元素</li>
  18. <li>我是浮动的元素</li>
  19. <li>我是浮动的元素</li>
  20. <li>我是浮动的元素</li>
  21. <li>我是浮动的元素</li>
  22. <li>我是浮动的元素</li>
  23. <li>我是浮动的元素</li>
  24. </ul>
  25. </body>
  26. </html>
复制代码
7.当绝对定位同时拥有定位属性和margin属性、绝对定位的的定位属性 top right bottom left和margin-top margin-right margin-bottom margin-left;各个方向上一至的时候其值会产生叠加效果，而按照方向执行叠加后的数值的偏移
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="width:500px;height:50px;background:#f00;position: absolute;left:100px;margin-left:100px;">
  13. 我一个具有position:absolute;且left:100px;margin-left:100px
  14. </div>
  15. </body>
  16. </html>
复制代码
我们会发现这个红色的色块距离左边200PX.left+margin-left

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

mseed
 楼主| 发表于 2012-4-16 09:21:13 | 显示全部楼层 来自 中国–江苏–南京
小结：
当元素同时拥有浮动和绝对定位时.绝对定位的优先权大于浮动.因为浮动受文档的逻辑结构位置限制。而绝对定位不会。
所以当绝对定位脱离文档流，绝对定位的元素不受浮动影响.即float:left会失效，
数学上我们知道.X轴上一个数值 Y轴上的一个数值即可确定一个点，感官上left right属于x轴bottom top属于Y轴。
我们完全可以设置一个无宽度和高度绝对定位的元素同时拥有top right bottom left来实现其根据其参考的定位基点的父元素的的大小来自适应大小.
但是IE6不支持.IE6只能识别left的值而忽视right.所以下面例子请在非IE6以及一下浏览器浏览
例子：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="author" content="aslen" />
  6. <meta name="Copyright" content="www.gongchang.com" />
  7. <style type="text/css">
  8. *{padding:0;margin:0}
  9. </style>
  10. </head>
  11. <body>
  12. <div style="height:500px;background:#f00;position: relative;width:500px; margin:100px auto">
  13. <div style="position:absolute;left:100px;top:100px;bottom:100px;right:100px;background:#0066FF">我是绝对定位 我自适应我的定位基点的元素</div>
  14. </div>
  15. </body>
  16. </html>
复制代码
实际应用:（个人的习惯）
  • 标题（“标题文字”和“更多”）（相对+绝对）
  • 需要让一些具有vertical-align:middle属性的元素抽出文档流（这个看具体情况，因为vertical-align:middle会影响文档中的文字对齐）（绝对）
  • 固定元素的浮动块（该浮动块内的元素布局固定 可以用绝对定位，并设置该浮动块为相对）(相对+绝对)

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

vip_meng
发表于 2012-4-16 09:44:25 | 显示全部楼层 来自 中国–上海–上海
好长的帖子

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-22 12:16 , Processed in 0.049890 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表