CSS定位
1.CSS 定位
定位的基本概念很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。
CSS 有三種基本的定位機制：
普通流:
元素依照其在HTML 中的位置順序決定排布的過程
浮動:
浮動的框可以向左或向右移動，直到它的外緣碰到包含框或另一個浮動框的邊框為止。
絕對定位:
絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被視為普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
定位屬性:
position,將元素放在一個靜態的,相對的,絕對的,或固定的位置
透過對top ,left,right,bottom 這四個屬性的賦值讓元素向對應的方向偏移
overflow 設定元素溢出其區域發生的事情
clip 設定元素的顯示形狀,多用於圖片
vertical-align 設定元素的垂直對其方式
z-index 設定元素的堆疊順序
接下來就著重來看看position 屬性: 為了形象,我們先建立一個html 檔案和CSS 檔案
html:
<div class="position1"></div> <p>this is php中文网</p> <p>this is php中文网</p> <p>this is php中文网</p> <p>this is php中文网</p>
CSS:
.position1{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}接下來我們可以看到普通串流的效果:
當我們在CSS 中加入position 賦值為相對的,向左偏移60px
position: relative; left: 60px;
接下來我們會看見:
在下面我們再將position 設定為絕對的:
position: absolute;
效果就變成這樣:
透過比較我麼就能理解position 這兩個值的區別,還有兩個屬性就是fixed,和static,fixed 是將元素固定下來,就算滾動螢幕,它也會在同一個地方不會動;而static 設定以後,偏移量什麼的就沒用了.
下面我們接著來看其他的屬性
當我們再加一個區塊在前面div 後面的時候: HTML
<div class="position1"></div> <div class="position2"></div>
CSS 新增:
.position2{
width: 100px;
height: 100px;
background-color: aquamarine;
position: relative;
left:10px;
top: 10px;
}就會出現下面的情況:
