08-定位/z-index控制重叠/display、visiblity、overflow
1.定位(四种定位+偏移量)
让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子
如果一个盒子既有left属性也有right，则默认会执行left；如果既有top也有bottom，则会默认执行top
静态定位(static)：
元素的默认定位方式，按照文档流来摆放盒子，没有边偏移，即无定位。在布局中很少用到。
相对定位(relative) ：
相对于原来位置进行移动。原位置在文档流中继续占有，后面的盒子仍然以文档流的方式解析它。即相对定位不脱离文档流
常用来限制绝对定位，即父元素相对定位，子元素绝对定位
<style> .first { position: relative; top: 100px; left: 100px; width: 100px; height: 100px; background-color: blueviolet; } .second { width: 100px; height: 100px; background-color: brown; } </style> </head> <body> <div class="first">1</div> <div class="second">2</div> </body>
绝对定位(absolute)
元素在移动位置的时候，是相对于它的祖先元素的
特点：
如果没有祖先元素或者祖先元素没有定位，则以浏览器(document文档)为准定位
如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置
绝对定位的元素会脱离文档流，不在占用原来位置
一般来说：子元素用绝对定位，父元素用相对定位
<style> .first { position: relative; width: 300px; height: 300px; background-color: blueviolet; } .second { width: 100px; height: 100px; background-color: brown; } .third { position: absolute; bottom: 30px; left: 30px; width: 50px; height: 50px; background-color: red; } .forth { position: absolute; top: 20px; left: 20px; width: 300px; height: 300px; background-color: skyblue; } </style> </head> <body> <!-- 绝对定位会脱离文档流，不占原来位置 --> <div class="forth">4</div> <div class="first"> <div class="second"> <div class="third">3</div> </div> </div> </body>
固定定位(fixed)：
是元素固定于浏览器可视区的位置，常用于设置在浏览器页面滚动时不会改变位置的元素
特点：
1.固定定位以浏览器的可视窗口为参照点移动元素
绝对定位的元素和父元素没有任何关系，且不随滚动条滚动
2.固定定位不占有原先位置
固定定位也是脱离文档流的，可以看作是一种特殊的绝对定位
如何让固定在版心右侧：
先让固定定位的盒子left：50%，然后再margin-left：版心宽度的一半距离。
<style> .main { width: 300px; height: 500px; margin: auto; background-color: violet; } .fix { position: fixed; bottom: 20px; left: 50%; margin-left: 150px; width: 60px; height: 100px; background-color: skyblue; } </style> </head> <body> <div class="main">版心盒子</div> <div class="fix">固定盒子</div> </body>
粘性定位(sticky)
可以认为是相对定位和固定定位的混合
特点：
1.以浏览器的可视窗口为参照点移动元素(和fixed相同)
2.粘性定位占有原先位置，即没有脱离文档流(同relative)
3.必须添加top、left、right、bottom其中一个属性才有效
4.跟页面滚动搭配使用。兼容性较差，IE不支持，实际中一般使用js来实现相同功能
<style> html, body { height: 2000px; } .nav { position: sticky; /* 当此粘性定位元素的顶部偏移量为0时，会固定住 */ top: 0px; width: 400px; height: 50px; background-color: skyblue; margin: 200px auto; } </style> </head> <body> <div class="nav">nav</div> </body>
z-index：
使用定位布局(不是float)时，可能会出现盒子重叠的情况，此时可以使用z-index来控制盒子的前后次序(z轴)
数值可以是正整数、负整数或0，默认是auto。数值越大，盒子越靠上
如果数值相同，则按照书写顺序，最后写的在最上面
数值后面不能加单位
只有使用定位的盒子才有z-index属性
<style> .first { position: absolute; width: 200px; height: 200px; background-color: violet; z-index: 10; } .second { position: absolute; width: 300px; height: 300px; background-color: skyblue; z-index: 5; } </style> </head> <body> <div class="first"></div> <div class="second"></div> </body>
绝对定位(固定定位类似)的盒子水平居中
加了绝对定位的盒子不能通过margin：auto来水平居中，但是可以通过计算来实现水平居中和垂直居中：先left父容器宽度的一半，再margin-left负值自己宽度的一半；垂直居中同理：先top父容器高度的一半，再margin-top负值自己高度的一半
<style> html, body { width: 100%; height: 100%; } .first { position: absolute; /* 水平居中 */ left: 50%; margin-left: -100px; /* 垂直居中 */ top: 50%; margin-top: -100px; width: 200px; height: 200px; background-color: violet; } </style> </head> <body> <div class="first"></div> </body>
定位的特性
1.绝对定位和固定定位也和浮动类似：
行内元素添加绝对或固定定位，可以直接设置height和width
块元素添加绝对或固定定位，如果不给height或width，默认大小是content的大小
浮动元素、绝对、相对定位的元素都不会触发外边距(margin)合并的问题
绝对、固定定位会完全压住下面文档流中的所有内容，但是浮动元素不同，浮动元素只会压住它下面文档流的盒子，但是不会压住下面文档流盒子里的文字(图片)。
浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的，所以文字会围绕浮动元素
<style> .first { position: absolute; /* float: left; */ width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="first"></div> <p>我被被被被被被被被被被被被被被被压住了</p> </body>
元素的显示与隐藏
1.display
display隐藏元素后，该元素不再占有原来的位置。应用广泛，常搭配js做特效
div { /* 隐藏元素 */ display: none; /* 除了转换为块级元素之外，同时还有显示元素的功能 */ display: block; }
2.visibility
visibility隐藏元素后，继续占有原来的位置
div { /* 隐藏元素 */ visibility: hidden; /* 元素可见 */ visibility: visible; }
3.overflow
指定如果内容溢出一个元素的框时会发生什么
但是如果有定位的盒子，需要慎用overflow：hidden，因为它会隐藏多余的部分
div { /* 不剪切内容也不添加滚动条 */ overflow: visible; /* 超出部分隐藏 */ overflow: hidden; /* 不论是否超出，总是显示滚动条 */ overflow: scroll; /* 超出自动显示滚动条，不超出不显示 */ overflow: auto; }
