position

從零開始的前端生活--position

包含塊

定義：什麼是包含塊，就是元素用來計算和定位的一個框，能夠說是參照物吧。好比width： 50%；他是參照哪一個元素的50%，那個元素就是「包含塊」。而絕對定位元素absolute的寬度是相對第一個position不爲static的祖先元素計算的。計算規則以下：

1. 根元素（）被稱爲「初始包含塊」，其尺寸至關等同於瀏覽器可視窗口的大小。
2. 對於其餘元素，若是該元素的position是relative或者static，則「包含塊」由其最近的塊容器祖先盒的content box邊界造成。
3. 若是元素position：fixed，則包含塊就是初始包含塊。
4. 若是元素position：absolute，則「包含塊」由最近的position不爲static的祖先元素建成。

position: absolute;

absolute和float同時存在時，float是無任何效果的。元素一旦position屬性值爲absolute或fixed，他的display就是block或table，還可以「塊狀格式化上下文（BFC）」。

absolute的計算和定位是相對於祖先定位元素的padding box。

無依賴絕對定位

absolute是很是獨立的css屬性值，其樣式和行爲表現不依賴其餘任何css屬性就能夠完成。不須要依賴relative等。

咱們把沒有設置top/left/bottom/right屬性值的絕對定位稱之爲「無依賴絕對定位」。無依賴絕對定位具備「相對性」和「不佔空間」的特色。若是咱們把一個元素設置position：absolute；不設置他的top等方位，那麼他的位置不發生改變的。咱們來測試一下相對性和不佔空間性。

<div class="demo">
    <img src="../image/pic03.png" alt="" class="top1">
    <img src="../image/pic01.jpg" alt="">
</div>

這是尚未加position：absolute的時候

咱們加下position：absolute；

.demo {
    display: inline-block;
}

.top1 {
    position: absolute;
}

這裏變成inline-block是爲了後面來證實有沒有佔空間。加了之後，結果變這樣。

也許有人問，這位置不是變了嗎？和樓上的圖不同啊。的確不同，位置不變性，指的是在html中他仍是在前面。兩幅圖疊加在一塊兒是由於「不佔空間性」。不信，咱們把兩幅圖位置對調，

<div class="demo">
    <img src="../image/pic01.jpg" alt="">
    <img src="../image/pic03.png" alt="" class="top1">
</div>

結果是這樣的

位置不變，他仍是在後面。爲何飄起來，沒有基線對齊？也許是由於不佔空間性，雖然存在，可是不佔空間，此時他的父級盒子demo的寬度只等於那副大圖，圓圖被忽略了。相對性我以爲是利用margin屬性進行定位。

還有其餘的應用，好比圖標和文字的水平對齊，帳戶登陸時輸入框的提示（利用了它不佔空間的特性）。

紅色字體出現可能會擾亂佈局，這時候就可使用不佔空間大小的特性。

固然相似還有下拉框

這種均可以利用無依賴絕對定位來實現。

absolute與overflow

若是overflow不是定位元素，同時絕對定位元素和overflow容器之間也沒有定位元素，則overflow沒法對absolute元素進行裁剪。

下面例子overflow都不會對absolute進行裁剪。

<div style="overflow: hidden;">
	<img src="1.jpg" style="position: absolute;">
</div>

知足overflow不是定位元素，而且absolute元素和overflow容器之間沒有定位元素，因此overflow沒法對他進行裁剪。

<div style="position: relative">
    <div style="overflow: hidden;">
		<img src="1.jpg" style="position: absolute;">
	</div>
</div>

知足overflow不是定位元素，而且overflow和absolute元素之間沒有定位元素，因此overflow沒法對他進行裁剪。

絕對元素不能讓overflow的滾動條出現。

absolute與clip

clip屬性想要起做用，元素必須是絕對定位或者固定定位。

clip語法

clip: rect( top right bottom left)

top，right等是指距離個邊緣多少。好比 clip: rect(0 0 0 0 ); 指的是距離上邊緣0，右邊緣0等等裁剪。

clip能夠對fixed固定定位進行裁剪。

最佳可訪問性隱藏：

網站的logo，爲了更好地seo識別，通常會隱藏文字。

<a href ="/" class="logo">
    <h1>onepiece</h1>
</a>

想辦法把onepiece隱藏起來。

下策：display: none或者 visibility: hidden;

中策：text-indent縮進，

移動端上策，pc端中策：color: transparent

上策：用clip配合absolute裁剪。

clip裁剪是至關於說不會裁剪掉面板，也就是clientWidth和clientHeight仍是原來大小。

absolute的流體特性

絕對定位元素具備流體特性，在對立方向同時發生定位的時候這個條件。什麼意思，意思就是top和bottom同時存在或者left和right同時存在。這時候它就表現爲格式化寬度或者格式化高度。當咱們這麼設置

.box{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
}

表示的是.box元素正好覆蓋包含塊的可視窗口。寬高都是流體性，這時候height的百分比就會生效。

垂直水平居中

第一種最差的：

.element{
    width: 300px; height: 200px;
    position: absolute; left: 50%; top: 50%;
    margin-left: -150px; // 寬高的通常
    margin-right: -150px;
}

第二種：

.element{
    width: 300px; height: 200px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); //自身的一半
}

第三種最好的:

.element{
    width: 300px; height: 200px;
    position: absolute;
    top: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;//由於寬高都是格式化寬高了，因此會垂直居中
}

position: relative;

相對定位

relative的定位有相對性和無侵入性。

相對定位的參照物就是本身，好比

xxx{
    position: relative;
    top: 100px;
    left: 100px;
}

就是至關於以本身爲座標原點，往左上方移動（100,100）。無侵入性就是不會影響周圍元素的佈局。

使用時，對立方位只能使用其一（或者說只有一個會生效），好比用了top和bottom，bottom就會失效。

position: fixed;

特殊之處：fixed固定定位元素的包含塊是根元素，也就是，因此在某個div裏使用fixed是沒用的，這個功能能夠用無依賴固定定位來替代（和前面的無依賴絕對定位同樣），沒有設置top，right等。