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等。