剛從後端的大坑中解脫出來，然後就又跳進了前端的坑，前端好像比後端寫的舒服，js寫的賊爽，不用管什麼類型，java中反射才能做到的事js直接將對象當map了，舒服啊！（廢話了哈哈哈）
不扯了進入正題
css定位屬性position有四種取值
position：static; 標準的文檔流模式，也就是行內元素佔一行，按照順序排列下來（設置top，left，right，bottom是不起作用的）
position: relative; 按照自己原有的文檔流位置定位（也就是說元素並不會脫離原有的文檔流，會保留原有的文檔流位置按照，可以設置定位屬性）
position: relative;多扯一句，這個元素理解上沒什麼問題，一段時間裏我搞不懂這個元素具體在寫代碼的時候有什麼作用，當我要爲一張圖片設置一個關閉按鈕的時候我用到了他樣式效果如下
代碼如下（我就不廢話解釋了）：
<style>
.box-top{
background-color: red;
}
img{
width: 50px;
height: 50px;
}
.box-main{
margin-left: 10px;
background-color: aquamarine;
float: left;
text-align: center;
width: 50px;
position: relative;/*相對定位，相對自己原有的文檔流位置定位，在這裏主要用於子元素定位使用*/
}
.close{
color: red;
position: static;
position: absolute;/*絕對定位，脫離原有的文檔流，依照父元素中非標準文檔流定位*/
top: -6px;
right: 2px;
cursor:pointer;
}
</style>
<body>
<div class="main">
<div class="box-main">
<span class="close">×</span>
<div class="div-top">
<img src="5miou7cy57e4zm6054fx7bt3x.jpg" />
</div>
<div class="div-bottom">小明</div>
</div>
<div class="box-main">
<span class="close">×</span>
<div class="div-top">
<img src="5miou7cy57e4zm6054fx7bt3x.jpg" />
</div>
<div class="div-bottom">小明</div>
</div>
<div class="box-main">
<span class="close">×</span>
<div class="div-top">
<img src="5miou7cy57e4zm6054fx7bt3x.jpg" />
</div>
<div class="div-bottom">小明</div>
</div>
</div>
</body>
還是說一句，我的小紅叉要設置絕對定位，他需要一個父級的定位元素，肯定不能是body ，所以我就想到了position: relative;這個屬性
position: absolute;第三個屬性絕對定位，這個屬性也好理解，就是相對於父元素的非默認定位元素位置定位（好像有點繞口哈哈），解釋一下吧：當設置這個元素後該元素會默認向上找定位元素，找不到就會以body元素爲標準來定位，所以這個元素是相對於元素定位的，很自然的他就是不隨鼠標滾輪移動的。這就是絕對定位
position:fixed ; 固定定位，這個沒啥好說的很簡單，就是相對於瀏覽器窗口定位的，常常用在那些邊欄廣告上的。
總結一下：css一開始寫的時候會有一些莫名其妙的問題，但是寫了幾天感覺就那樣，把定位搞懂，浮動搞定，還有一些盒子定位屬性以及相關的新特性搞懂，然後就是一些僞類，最後就是實踐了，然後前端果然沒有後端難233333（當然js特效寫的牛逼的人我還是很佩服的），最後吐槽一下我們公司老闆，連美工都不招一個，叫我們程序員自己設計界面，搞的不好還要被罵，創業公司不好待啊！都是淚！！！！！