position:relative和absolute以及css height

为什么80%的码农都做不了架构师？>>>   

---

|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属性的详细介绍 点我

转载于:https://my.oschina.net/sikou/blog/485892