百度 网站 质量度,扬州市工程建设招标网,网站建设技术服务方案,wordpress文字悬停变色众所周知#xff0c;前端CSS中#xff0c;盒模型、浮动、定位为必须掌握的三座大山。今天就来聊聊定位的那些事。定位是什么#xff1f;先来看看哪些场景用到定位#xff0c;如下图所示#xff0c;凡是有盒子压住另一个盒子的地方都可定位#xff0c;因为用浮动做不了前端CSS中盒模型、浮动、定位为必须掌握的三座大山。今天就来聊聊定位的那些事。定位是什么先来看看哪些场景用到定位如下图所示凡是有盒子压住另一个盒子的地方都可定位因为用浮动做不了如果盒子浮动会并排但不会出现有层级的观感。所以想要有层级的观感就得用定位。简单来说定位就是将盒模型中的盒子显示在我们想要的位置。定位的语法定位由position属性和边偏移属性组成。position属性语法为{position:属性值}常用值如下边偏移属性语法为{边偏移属性值}常用值如下定位模式和用法1、静态定位static静态定位具备标准流特性所有元素默认静态定位静态定位不能通过设置边偏移改变位置。静态定位的作用取消定位。2、相对定位relative相对定位在标准流中采用相对定位的盒子仍然占用原来的位置。每次移动位置以自己的左上角为基点移动(相对于自己移动位置)3、绝对定位absolute绝对定位不具备标准流特性采用绝对定位的盒子在设置边偏移后不占位置。绝对定位的盒子在父级没有定位时以浏览器为准对齐当父级有定位依据最近的已定位的父元素进行定位。4、固定定位fixed固定定位不具备标准流特性不占位置始终以浏览器为标准显示位置不管浏览器滚动和窗口大小fixed显示固定。终极用法口诀子绝父相或子绝父绝。就是说在实际开发过程中子盒子采用绝对定位那么父盒子必定采用相对定位或绝对定位。如果要实现绝对定位的盒子水平或垂直居中需要采用一定的算法。因为加定位有偏移和浮动的盒子通过设置margin值实现水平居中失效。那么采用以下方法先设置左边偏移50%50%表示父盒子的一半即left50%。再设置自己盒子外边距为盒子宽度负的一半即margin-left-width/2。定位模式转换当盒子加fixed和absolute定位元素转换为行内块元素。如果盒子固定定位当盒子内容为空时盒子的高度会为0为避免这种情况可设置盒子的宽高再设置下面的盒子的margin值可实现top通栏固定不动。如下图的首页展示固定top通栏。层级z-index当定位元素重叠可通过z-index设置层叠次序。层级z-index只针对定位的元素标准流和浮动不具备该属性。层级z-index的用法z-index:2;后面没有单位。采用相对定位比标准流高一层级浮在上面。盒子已经用相对定位但是鼠标放上去还想用相对定位就可用z-index。取值相同时根据书写顺序后来居上。默认为0值越大层级越高。
