HTML中的三種佈局方式：
標準流；順序佈局
浮動；
定位；
HTML兩大元素：
1，塊級元素；獨佔一行！
div h1~6 列表（ol,ul,li ） table p 等等；
2，內聯元素；一般不會獨佔一行！
a超鏈接 span文字 img圖片 input空鍵
position中的可選參數：
static:默認值，正常排列
relative:相對定位，利用left top right bottom來改變元素的位置。
absolute:絕對定位，利用left top right bottom，後寫的內容覆蓋之前的。
fixed:固定定位，不受制於父元素，即使父元素有了position屬性。
inherit:繼承 繼承fixed的父元素時，
會出現emmmmm不一樣的地方！！！！
記得弄清楚這個啊！！！！！
【position:inherit;//繼承了父元素的fixed;此時就會相對於瀏覽器定位;不會相對於父元素定位,】
absolute：絕對定位。將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據body對象。而其層疊通過z-index屬性定義
。當對象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動條。
fixed：固定定位。對象定位遵從絕對(absolute)方式。但是要遵守一些規範。當對象定位在瀏覽器窗口以外，瀏覽器不會因此顯示滾動條，而當滾動條滾動時，對象始終固定在原來位置。
relative：相對定位。對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置。當對象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動條。
static：元素框正常生成。塊級元素生成一個矩形框，作爲文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。
inherit：繼承值，對象將繼承其父對象相應的值。
relative：
left top
right bottom
absolute：相對窗口定位。
left top 左下角爲原點
right bottom 右下角爲原點
z-index
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>彈出層案例</title> <style type="text/css"> *{ padding: 0; margin: 0; } html, body{ width: 100%; height: 100%; } .content{ width: 100%; height: 4043px; background: url("mooc.png") center top no-repeat; } .login{ width: 360px; height: 362px; background: url("login.png") no-repeat; z-index: 2; position: fixed; left: 50%; top: 50%; margin-top: -181px; margin-left: -180px; } .opacity_{ width: 100%; height: 100%; background: url("img/opacity.png") no-repeat; position: fixed; left: 0; top: 0; z-index: 0; } </style> </head> <body> <div class="content"></div> <div class="login"></div> <div class="opacity_"></div> </body> </html>