position学习终结者(一)
position的值有以下五种。现结合样例谈一下我对这五种值的认识:
一、不使用不论什么值:
代码1-1例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .parent{ width:300px; height:300px; background-color:gray; } .son1{ width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
图1-1
二、static:默认值。
没有定位,元素忽略 top, bottom, left, right 或者 z-index 声明,依照正常的文档流进行排列。
代码2-1例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .parent{ width:300px; height:300px; background-color:gray; } .son1{ position:static; left:60px; top:60px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
总结:
①、比对图1-1与图2-1能够发现两者没有什么区别,这说明static是position的默认值;
②、上面代码son1 div样式中设置了left和top属性,但从图2能够发现这些属性的设置并没有起到应有的作用。这印证了position为static时会忽略 top, bottom, left, right 或者 z-index 声明
三、relative:这个单词本身是“相关、相对”的意思,从这个单词能够看出该值的作用。只是这里要搞清楚它是相对哪个对象来进行偏移的。
代码3-1例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> .parent{ width:300px; height:300px; background-color:gray; } .son1{ position:relative; left:60px; top:60px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
总结:
①、对照图1-1代码和图3-1代码,对照图1-1和图3-1,能够得出这样的结论:son1是相对它原来的位置进行偏移的;
②、哪些属性能够设置son1的偏移位置:top、right、bottom、left都能够做到。
③、son1和son2属于同级。son1偏移后,那son2偏移了吗?son2没有偏移。它依旧在原来的位置,事实上①已经能够回答这个问题了。能够这样理解:假设没有设置position的值。son1的位置会依照正常的文档流进行排列。假设设置son1 position属性的值为relative。son1的位置会依照top、right、bottom、left的值进行位置偏移,这样的偏移是相对它原来的位置进行的(relative的“相对的”意思也正体现于此);
④、假设为son2也加入position的值为relative并加入left等属性,会发生什么?通过①能够回答这个问题:会依照son2原来的位置进行相对的偏移,还是那句话——这里的“相对”是与原来的位置相比。
⑤、呵呵呵,上面几点中有三点提到了“原来的位置”,那么它相对于原来位置的哪个部位偏移的呢?中心吗?不是的,relative的偏移是基于对象的margin的左上側的来说的;
四、absolute:毫不掩饰,当初学习这块儿时。就是这个absolute把我弄懵了,呵呵呵。以下通过样例来一层层的理解这个absolute(注意:为了更好地理解absolute值。请先“忘掉前面讲的一切”):
代码4-1例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .son1{ width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="son1">son1</div> <div class="son2">son2</div> </body> </html>
说明:观察代码4-1可知上图中没有使用position属性,也就是说position属性的值为static。
代码4-2例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .son1{ position:relative; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="son1">son1</div> <div class="son2">son2</div> </body> </html>
说明:比对代码4-1和代码4-2。能够看到唯一变化的地方就是son1的样式加入了“position:relative;left:150px;”;
代码4-3例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .son1{ position:absolute; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="son1">son1</div> <div class="son2">son2</div> </body> </html>
说明:比对代码4-2和代码4-3,能够看到唯一变化的地方就是son1的样式position的属性值有relative改为了absolute。
总结:
①、对照图4-2和图4-3可以非常轻易的得出relative和absolute的一个区别:relative所作用的元素移动后。原来的位置没有被其他元素占用;absolute所作用的元素移动后,原来的位置会被其他元素占用。
②、absolute影响的元素移动后之所以会被其他元素占用是因为被absolute影响的元素脱离了文档流。不在自上而下、自左而右的显示元素。而还有一个元素(son2)则没有脱离文档流。这时没有脱离文档流的元素直接从父元素(body相对于son2而言是父元素)開始定位,即言没有脱离文档流的元素(son2)的文档流不再基于absolute影响的元素(son1)而是基于父元素定位。于是就看到了这样的情形;
代码4-4例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .parent{ margin-left:50px; width:300px; height:300px; background-color:yellow; } .son1{ position:absolute; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
说明:观察代码4-4可知class为parent的div没有使用position属性,也就是说其position属性的值为static;
代码4-5例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .parent{ position:absolute; margin-left:50px; width:300px; height:300px; background-color:yellow; } .son1{ position:absolute; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
说明:观察代码4-5可知class为parent的div的position属性的值为absolute;
代码4-6例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .parent{ position:relative; margin-left:50px; width:300px; height:300px; background-color:yellow; } .son1{ position:absolute; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
说明:观察代码4-6可知class为parent的div的position属性的值为relative。
代码4-7例如以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> body{ margin:0px; background-color:gray; } .parent{ position:fixed; margin-left:50px; width:300px; height:300px; background-color:yellow; } .son1{ position:absolute; left:150px; width:50px; height:50px; background-color:green; } .son2{ width:50px; height:50px; background-color:red; } </style> </head> <body> <div class="parent"> <div class="son1">son1</div> <div class="son2">son2</div> </div> </body> </html>
总结:
①、对照图4-4、图4-5、图4-6和图4-7能够非常轻易的得出这样一个结论:假设某一absolute作用的元素(比方:上面的son1)的父对象(或曾祖父,仅仅要是父级对象(比方上面class为parent的div))设置了position属性且position的属性值为absolute、relative或者fixed,那么这个子元素(比方:上面的son1)会參照离它(指子元素)近期的且position的属性值为absolute、relative或者fixed的父元素(比方上面class为parent的div)进行定位,但是以父元素哪个定位点来进行定位呢,答案是父元素的左上角(永远都是父元素的左上角,假设父元素样式中有padding也是这样,这一点可參考还有一篇博客——《HTML CSS——position学习终结者(二)》)。假设子元素(比方:上面的son1)的全部父元素的position属性值不为absolute、relative或者fixed,那么该子元素将以body为定位对象进行定位,图4-4非常好的演示了这一点(注意:单单就子元素而言图4-4和图4-3是一样的,它们參照定位对象都是body);
②、因为将元素position属性设置为absolute后,会导致该元素脱离文档流。就像它不属于父对象一样,它漂浮了起来,在DreamWeaver中把它称为“层”,事实上意思是一样的;
五、fixed:fixed是特殊的absolute。position属性值为fixed的元素总是以body元素为定位对象(即依照浏览器的窗体进行定位)通过"left"、"top"、"right"或"bottom" 属性进行规定,即使拖动滚动栏,该元素所在的位置也不会改变的(与background-attachment:fixed类似)。
六、inherit:该属性作用的元素继承父元素position的属性值。因为该属性在不论什么的版本号的 Internet Explorer (包含 IE8)都不支持,所以能够忽略它。
【0分下载演示资源】