定位 · web前端

[TOC] # 定位元素的定位属性,主要包括定位模式和边偏移两部分 **定位模式** ~~~ position: left | right | top | bottom ~~~ **边偏移** | 边偏移属性 | 描述 | | --- | --- | | top | 顶端偏移量, 定义元素相对于其父元素上边线的距离 | | bottom | 底部偏移量, 定义元素相对于其父元素下边线的距离 | | left | 左侧偏移量, 定义元素相对于其父元素左边线的距离 | | right | 右侧偏移量, 定义元素相对于其父元素右边线的距离 | 相对于父元素的距离 ## 静态定位默认方式 `position:static;` 标准流 ## 绝对定位(看脸型) `position:absolute; ` 特点： ◆**自身从浏览器出发** ◆绝对定位之后，**元素不占位置**，**会脱标, 脱离标准流**。 ◆**嵌套的盒子，父元素没有给自身绝对定位，子元素绝对定位，子元素从浏览器出发设置自身位置。** ◆**嵌套的盒子，父元素绝对定位，子元素绝对定位，子元素从父元素出发设置自身位置**。 ◆行内元素转成行内块。（不推荐使用） ## 相对定位（自恋型）还在标准流中 `position:relative; ` ◆位置从自身出发。 ◆设置相对定位之后，**还占据原来的位置**。 ◆子绝父相，子元素绝对定位，父元素相对定位。 ◆嵌套的盒子，父元素相对定位，子元素绝对定位，子元素从父元素出发设置自身位置。 ◆不能将行内元素转成行内块。 ## 固定定位 `position:fixed;` 特点: ◆位置从浏览器出发。 ◆**不占据原来的位置，会脱标** ◆可以将行内元素转换为行内块。（不推荐使用） **固定定位一定要写宽和高, 除非有内容撑开不用写** `height: 100%;` `width: 100%;` ## 子绝父相子级是绝对定位, 父级用相对定位绝对定位是将元素依据最近的已经定位绝对,固定或相对定位的父元素进行定位就是子级是绝对定位, 父级只要是定位就可以(不管是绝对还是相对) # 定位的盒子居中对齐 ◆`margin:0 auto;` **只能**让标准流的盒子居中对齐。 ◆子绝父相的盒子，居中对齐，首先left 50%, 父盒子一半，使用margin-left:负值, 向左走自己外边距负的一半。 ~~~ <style> .father { width: 800px; height: 400px; background-color: pink; margin: 40px auto; } .son { width: 100px; height: 40px; background-color: purple; position: absolute; /* 加了绝对定位的盒子, 左右auto就无效了 */ /* margin: 0 auto; */ left: 50%; /* left 父盒子宽度的一半 */ margin-left: -50px; /* 左走自己宽度的一半 */ top: 50%; margin-top: -20px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> ~~~ # 叠加次序在css中,要想调整重叠定位元素的堆叠顺序, 可以对定位元素应用`z-index`层叠等级属性, 其值可以为正整数,负整数和0 比如: `z-index: 2;` 注意: 1. `z-index`的属性值是0, 取值越大, 定位元素在层叠元素中越居大 2. 如果取值相同,则根据书写顺序,后来居上 3. 后面数字一定不能加单位 4. 只有相对定位,绝对定位,固定定位有此属性,其余标准流,浮动,静态定位都无此属性,亦不可指定此属性 ~~~ <style> div { width: 200px; height: 200px; background-color: pink; position: absolute; /* 绝对定位 */ top: 0; left: 0; } div:first-child { z-index: 1; /* font-weight: 700 */ } div:nth-child(2) { background-color: purple; top: 30px; left: 30px; z-index: 2; } div:last-child { background-color: skyblue; top: 60px; left: 60px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> ~~~ # 定位模式转换跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式， ** 因此比如行内元素如果添加了绝对定位或者固定定位后浮动后，可以不用转换模式，直接给高度和宽度就可以了。** # 四种定位总结 | 定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 | | ------------ | ---------- | --------- | ---------------- | | 静态static | 不脱标，正常模式 | 不可以 | 正常模式 | | 相对定位relative | 不脱标，占有位置 | 可以 | 相对自身位置移动（自恋型） | | 绝对定位absolute | 完全脱标，不占有位置 | 可以 | 相对于定位父级移动位置（拼爹型） | | 固定定位fixed | 完全脱标，不占有位置 | 可以 | 相对于浏览器移动位置（认死理型） |