position:relative和absolute以及css height

---

|position屬性

    <不管怎樣設置

        始終文字框都沒法緊貼瀏覽器邊框……剩下的縫隙簡直誘發強迫症

body { overflow: hidden;}

.container{position:relative;
            z-index:998;
            padding:2rem;top: 0px; left: 0em;
            height:60em;
            width: 20%;
            text-align : right;}

        這樣這樣，把position : relative改成position：absolute就能夠了。

 <完美！:D

static :      　‍無特殊定位，對象遵循HTML定位規則  absolute : 　將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊經過z-index屬性定義。此時對象不具備邊距，但仍有補白和邊框  relative : 　  對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置  fixed : 　      IE5.5及NS6尚不支持此屬性

‍         就是那句，對象不可層疊！！！因此無論怎樣top：0和left：0都沒用。

---

|css高度‍ 點我

            CSS高度是指經過CSS來控制設置對象的高度。使用CSS屬性單詞height。單位能夠使用

PX，em等經常使用使用PX（像素）爲html單位。

          height默認是auto，自適用內容而增高

         」一般單獨對一個div高度爲百分比沒有效果「看到這句話我……ORZ

         不過，總有解決的辦法，DIV的CSS height:100%無效的解決辦法

body{ margin:0; height:100%; }
.container { height: 100%;}

        其實就是給body也加上height：100%的屬性

---

|overflow

        定義：overflow 屬性規定當內容溢出元素框時發生的事情。

        可能的值：visible | hidden | scroll | auto | inherit

        height：60em 去掉，由於body還設置了overflow: hidden  因此乾脆height值設大一點就當高度滿屏。……不過如今就完美解決了~

        設置爲hidden能夠免去醜陋的進度條，關於overflow屬性的詳細介紹 點我