Position

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Position</title>
<link rel="stylesheet" href="Position_set.css"/>
</head>
<body>
<div class="box" id="one">one</div>
<div class="box" id="two">two</div>
<div class="box" id="three">three</div>
<div class="box" id="four">four</div>
</body>
</html>css

 

CSS文件:html

@charset "utf-8";
.box {
display: inline-block;       /*inline表示橫向排列,不能設置寬高,block表示縱向排列*/
width: 100px;
height: 100px;
background: red;
color: white;
}瀏覽器

#two {
position: sticky;
top: 50px;
left: 60px;
background: blue;
}網絡

 

 

Position的四個屬性值htm

  1. relative
  2. absolute
  3. fixed
  4. static

 

下面分別講述這四個屬性對象

 1.relativethree

relative是相對它自己的位置來進行偏移的。當設置了relative屬性的時候,將根據top,right,bottom,left的值按照它理應所在的位置進行偏移,設置了relative的部分不會影響其餘部分的位置。utf-8

2.absolute文檔

當position設置爲absolute後,其到底以誰爲對象進行偏移呢?這裏分爲兩種狀況(來源於網絡): it

(1)    當父對象(或曾祖父,只要是父級對象)parent也設置了position屬性,且position的屬性值爲absolute或者relative時,不是默認值的狀況,此時按照這個parent來進行定位。 

對象雖然肯定好了,但有些細節須要注意,那就是咱們到底以parent的哪一個定位點來進行定位呢?若是parent設定了margin,border,padding等屬性,那麼這個定位點將忽略padding,將會從padding開始的地方(即只從padding的左上角開始)進行定位,也就是忽略padding,固然並不會忽略margin和border。  接下來的問題是,因爲當position設置爲absolute後,會致使absolute部分溢出正常的文檔流,就像它不屬於 parent同樣,它漂浮了起來,在DreamWeaver中把它稱爲「層」,其實意思是同樣的。此時其餘部分將得到已absolute部分的位置,它的文檔流再也不基於已設置的部分,而是直接從parent開始。

(2)    若是不存在一個有着position屬性的父對象,那麼就會以body爲定位對象,按照瀏覽器的窗口進行定位。

3.fixed

fixed老是以body爲定位對象的,按照瀏覽器的窗口進行定位,即便拖動滾動條,位置也不會改變。

4.static

position的默認值,通常不設置position屬性時,會按正常的文檔流進行排列。

相關文章
相關標籤/搜索