浅谈块级元素和行级元素的相对定位和绝对定位问题
以前我所學(xué)到的關(guān)于定位問題僅僅知道absolute是絕對定位，它可以讓元素脫離標(biāo)準(zhǔn)流上浮，并且和float相比它可以讓元素重疊在一起，后面的元素覆蓋在前面的元素上。
relative是相對定位，它使元素固定在標(biāo)準(zhǔn)流上，并且占據(jù)一定的空間，不過和absolute一樣，relative的任何移動都不影響其他標(biāo)準(zhǔn)流的元素。absolute和relative最常用的做法是給父類
一個相對定位，給子類一個絕對定位，然后子類相對父類位置移動，比較容易控制元素在整個頁面的位置。不過通過今天的實驗我發(fā)現(xiàn)了一些新東西來和大家分享。
ps:我使用的是谷歌瀏覽器，對于其他瀏覽器是否存在問題沒有試驗，如果大家發(fā)現(xiàn)什么問題請告訴我。
1.倆個塊級元素（或倆個行級元素）都僅僅absolute,但是沒有設(shè)定left和top，它們會重疊在一起，然后后面的元素覆蓋前面的元素。
<!DOCTYPE html> <html> <head lang="en"><meta charset="utf-8"/><title></title><script src="../js/jquery-1.10.2.js"></script><script></script><style>*{margin:0;padding:0;}div:nth-of-type(1){position:absolute;width:200px;height:200px;background-color: blue;}div:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;}span:nth-of-type(1){position:absolute;width:200px;height:200px;background-color:blue;}span:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;}</style> </head> <body><div></div><div></div><span></span><span></span> </body> </html>2.一個塊級元素僅僅absolute,但是沒有設(shè)定left和top，而另一個塊級元素沒有定位，他們不會重疊。行級元素就好玩了，大家可能在上面就已經(jīng)發(fā)現(xiàn)行級元素沒有內(nèi)容，卻能撐開寬高，沒錯就是定位引起的，當(dāng)我們把背景顏色為藍的行級元素的定位去掉，他將沒有辦法撐開寬高而消失，紅色的塊級元素和紅色的行級元素重疊，依舊是后壓前，藍色的塊級元素在最上面。
<!DOCTYPE html> <html> <head lang="en"><meta charset="utf-8"/><title></title><script src="../js/jquery-1.10.2.js"></script><script></script><style>*{margin:0;padding:0;}div:nth-of-type(1){width:200px;height:200px;background-color: blue;}div:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;}span:nth-of-type(1){width:200px;height:200px;background-color:blue;}span:nth-of-type(2){position:absolute;width:200px;height:200px;background-color: red;}</style> </head> <body><div></div><div></div><span></span><span></span> </body> </html>?
3.將第二種情況變一下，給帶有absolute的元素加上left：0;top:0;這時候所有的圖片就全都重疊在一起了。
<!DOCTYPE html> <html> <head lang="en"><meta charset="utf-8"/><title></title><script src="../js/jquery-1.10.2.js"></script><script></script><style>*{margin:0;padding:0;}div:nth-of-type(1){width:200px;height:200px;background-color: blue;}div:nth-of-type(2){position:absolute;left:0;top:0;width:200px;height:200px;background-color: red;}span:nth-of-type(1){width:200px;height:200px;background-color:blue;}span:nth-of-type(2){position:absolute;left:0;top:0;width:200px;height:200px;background-color: red;}</style> </head> <body><div></div><div></div><span></span><span></span> </body> </html>4.之后我在想margin-left在定位之后是否能用，結(jié)果證明不但能用，還能和left一共用，效果是left和margin-left效果疊加，試驗中我將left和margin-left效果疊加成0，所以在左上角。
<!DOCTYPE html> <html> <head lang="en"><meta charset="utf-8"/><title></title><script src="../js/jquery-1.10.2.js"></script><script></script><style>*{margin:0;padding:0;}div{position:absolute;left:200px;top:0;margin-left:-200px;width:200px;height:200px;background-color: blue;}span{position:absolute;left:0;top:200px;margin-top:-200px;width:200px;height:200px;background-color: red;}</style> </head> <body><div></div><span></span> </body> </html>5.最后說一點很重要的東西——relative，書上定義的是relative：對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left屬性進行偏移時不影響常規(guī)流中的任何元素。
很長時間我都認為有relative 屬性的元素在標(biāo)準(zhǔn)流定死的，不能覆蓋帶有absolute屬性的元素，也就是說無法用z-index，但是這個理解是錯誤的，我在解決一個無法用absolute解決的問題，(這個問題是absolute會讓元素重疊在一起，而relative不會)我試著用了一下relative，結(jié)果發(fā)現(xiàn)成功了，于是我找到z-index的適用情況明確包括relative，當(dāng)relative元素和absolute元素的z-index的值相同時，absolute在上面。
<!DOCTYPE html> <html> <head lang="en"><meta charset="utf-8"/><title></title><script src="../js/jquery-1.10.2.js"></script><script></script><style>*{margin:0;padding:0;}div:nth-of-type(2){position:absolute;left:0;top:0;width:200px;height:200px;background-color: red;z-index: 1;}div:nth-of-type(1){position:relative;width:200px;height:200px;background-color: blue;z-index:1;}</style> </head> <body><div></div><div></div> </body> </html>轉(zhuǎn)載于:https://www.cnblogs.com/iwebkit/p/6134118.html
總結(jié)
以上是生活随笔為你收集整理的浅谈块级元素和行级元素的相对定位和绝对定位问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于java的关键字 transien
- 下一篇： sqlmap的二次开发