Position

時間 2019-11-14

標籤 position 欄目 CSS 简体版

原文原文鏈接

<!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

relative
absolute
fixed
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屬性時，會按正常的文檔流進行排列。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。