CSS重点-定位 position
为什么需要定位? 有些效果,标准流或浮动都无法快速实现,此时需要定位来实现: 1.浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。 2.定位则是可以让盒子*的在某个盒子内移动位置或固定屏幕中某个位置,并且可以压住其他盒子。 定位组成: 定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。 定位=定位模式 + 边偏移 *定位模式用于制定一个元素在问当中的定位方式。边偏移则决定了该元素的最终位置。 定位模式: 定位模式决定元素的定位方式,他通过CSS的position属性来设置,其值可以分为四个: 参数: static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 边偏移: 边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right四个属性。 参数: 属性 示例 描述 top top:80px 顶端偏移量,定义元素相对于其父元素上边线的距离。 bottom bottom: 80px 底部偏移量,定义元素相对于其父元素下边线的距离。 left left:80px 左侧偏移量,定义元素相对于其父元素左边线的距离。 right right:80px 右侧偏移量,定义元素相对于其父元素右边线的距离。 (一)静态定位 静态定位是元素的默认定位方式,无定位的意思。 语法: 选择器:{ position: static; } 静态定位按照标准流特性摆放位置,它没有边偏移。 这种定位在不居中很少使用。 (二)相对定位 相对定位是元素在移动位置的时候,是相对于他原来的位置来说的。(自恋型) 语法: 选择器{ position:relative; } 特点(重要): 1.它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。 2.原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待他,(不脱标,继续保留原来的位置) 因此,相对定位并没有脱标,他最典型的应用是给绝对定位当爹的。 (限制绝对定位)<style> .box1 { position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: aqua; } .box2 { width: 200px; height: 200px; background-color: brown; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
(三)绝对定位
绝对定位是元素在移动位置的时候,是相对于它的祖先元素来说的(拼爹型)。 语法: 选择器 { position: absolute; } 绝对定位的特点(重点): 1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Docutment文档) 2.如果祖先元素有定位(相对、绝对、固定定位),则以最近一级的有定位祖先元素为参考点移动位置。 3.绝对定位不再占有原来的位置(脱标)。<style> .son { position: absolute; /* top: 0; left: 0; */ top: 100px; right: 200px; width: 200px; height: 200px; background-color: brown; } .father { /* 祖先元素有定位 */ /* position: relative; */ width: 500px; height: 500px; background-color: chartreuse; } .box { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: coral; } </style> </head> <body> <div class="son"></div> <div class="father"> <div class="box"></div> </div> </body>
(四)固定定位
固定定位是元素固定于浏览器可视区的位置。主要使用场景:可以在浏览器页面滚动时元素的位置不会改变。 语法: 选择器 { position: fixed; } 特点(重要): 1.以浏器的可视窗口为参照点移动元素。 注意: (1).跟父元素没有任何关系。 (2).不随滚动条滚动。 2.固定定位不占由原来的位置。 固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。<style> .dj { position: fixed; top: 100px; left: 40px; } </style> </head> <body> <div class="dj"> <img src="images/pvp.png"> </div> </body>固定定位小技巧:固定在版心右侧 小算法: 1.让固定定位的盒子left:50% 走到浏览器可视区(版心)的一半位置。 2.让固定定位的盒子margin-left:版心宽度的一半距离。 多走版心宽度的一半位置,就可以让固定定位的盒子贴着版心右侧对齐了。 ------------------------------------------------------------------------------------------------------------------------------------- 子绝父相的由来: 子绝父相:通俗的讲就是自己是绝对定位的话,父级要用相对定位。 注意: 1.子级用绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。 2.父盒子需要加定位限制子盒子在父盒子内显示。 3.父盒子布局时,需要占有位置,因此父亲只能是相对定位。 这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级。 总结:因为父级需要占有位置,因此是相对定位,子盒子不需要占有位置,则是绝对定位。 粘性定位(了解): 粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的 语法: 选择器 { position:sticky;top: 10px; } 特点: 1.以浏览器的可视窗口作为参照点移动元素(固定定位的特点); 2.粘性定位占有原先的定位(相对定位的特点); 3.必须添加top、left、right、bottom中的一个才有效。 跟页面滚动搭配使用,兼容性较差,IE不支持。
<style> body { height: 3000px; } .nav { position: sticky; top: 0px; width: 800px; height: 50px; background-color: coral; margin: 100px auto; } </style> </head> <body> <div class="nav">我是导航栏 </div> </body>
*定位的叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴) 语法: 选择器 { z-index:1; } 注意: 数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上; 如果属性值相同,则按照书写顺序,后来居上; 数字后面不能加单位; 只有定位的盒子才有z-index属性。 定位的拓展: 1.绝对定位的盒子水平垂直居中: 加了绝对定位的盒子不能通过margin:0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中: left:50%; margin-left:盒子一半宽度的负值 top:50%; margin-top:盒子高度一半的负值<style> .box { position: absolute; width: 200px; height: 200px; background-color: aqua; margin: auto; } </style> </head> <body> <div class="box"></div> </body>2.定位特殊特性 绝对定位和固定定位也和浮动类似。 (1).行内元素添加绝对或者固定定位,可以直接设置高度和宽度。 (2).块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。 --> 3.脱标的盒子不会触发外边距塌陷 浮动元素、绝对定位(固定定位)元素都不会触发外边距合并的问题 --> 4.绝对定位(固定定位)会完全压住盒子 浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里的文字(图片),但绝对定位(固定定位)会压住下面标准流所有的内容。 浮动之所以不会压住文字,是因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素。