17.前端笔记-CSS-定位-创新互联

1、为什么要定位

先看看以下这些场景是否可以用标准流或浮动实现
（1）某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
（2）滚动窗口时，某些盒子是可以固定在屏幕某个位置的
以上这种场景使用标准流和浮动无法快速实现，此时需要引入定位进行实现
浮动：可以让多个块级盒子一行没有缝隙排列展示，经常用于横向排列盒子
定位：可以让盒子自由的在某个盒子内移动位置或固定屏幕中某个位置，并且可以压住其他盒子

赤峰林西ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！2、定位组成

定位：将盒子定在某个位置，定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式：用于指定一个元素在文档中的定位方式
边偏移：决定了该元素的最终位置

2.1 定位模式

决定元素的定位方式，通过css设置position属性

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

2.1.1 静态定位static

元素默认的定位方式，无定位的意思。还是按照标准流特性摆放位置，没有边偏移
因此定位在布局中很少用到

div{position:static;
}

2.1.2 相对定位relative(***)

相对定位是元素在移动位置时，是相对于它原来的位置来说的
（1）参照点是自己原来的位置(left:10px,表示左边相对于原来的位置偏移了10px)
（2）原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置，与浮动不同 ）
（3）相对定位可以用来限制绝对定位

div{position:relative;
}

原来：

相对偏移之后：

2.1.2 绝对定位（***）

绝对定位是元素在移动位置时，相对于它的祖先元素来说的
语法：

div{
	position:absolute;
}

特点：
（1）没有祖先元素或祖先元素没有定位，则以浏览器为准定位，见示例（1.1）和（1.2）
（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置，见示例（2.1）
（3）绝对定位会脱标，不再占用原先位置。其他标准流元素会占用原来绝对定位元素所在的位置 ,见示例（3.1）
（1.1）没有祖先元素：以浏览器为准定位

（1.2）有祖先元素，但祖先元素没有定位：以浏览器为准定位

（2.1）祖先元素有定位，以最近一级有定位的祖先元素作为参考
grandfather>father>son
grandfather有定位，father无定位

grandfather
father
 
son

（3.1）绝对定位的元素会脱标

box1
box2

添加绝对定位之前：

添加绝对定位之后：脱标

2.1.3 固定定位fixed(***)

固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变
特点：

(1)以浏览器的可视窗口为参照点移动元素
和父元素没有关系
不随滚动而滚动
(2)固定定位不占用原先的位置（脱标）
固定定位可以看作是特殊的绝对定位

div{
	position:fixed;
}

加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油
加油加油

fixed固定定位

技巧：固定定位搭配版心右侧

算法：
（1）让固定定位的盒子left:50%,走到浏览器可视区的一半位置（版心）
（2）让固定定位的盒子margin-left:版心宽度的一半距离。版心右侧

fixed固定到版心

2.1.4 粘性定位sticky

粘性定位可以看作是相对定位和固定定位的混合
实际不常用，IE不兼容。现在网页上看到的类似粘性定位的一般都是使用js实现

div{
position:sticky;
top:10px;
}

特点：
（1）以浏览器的可视窗口为参照点移动元素（固定定位特点）
（2）粘性定位占用原先位置（相对定位特点）
（3）必须添加top\bottom\left\right其中一个属性才生效

导航栏粘性定位

粘性定位sticky

2.2 边偏移

绝对盒子最终移动到什么位置
有top\bottom\left\right4个属性

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量，定义元素相对其父元素下边线的距离
left	left:80px	左侧偏移量，定义元素相对其父元素左边线的距离
right	right:80px	右侧偏移量，定义元素相对于其父元素右边线的距离

3、子绝父相

子元素是绝对定位的话，父元素要用相对定位。
（1）子元素绝对定位，不会占用位置，可以放到父盒子的任何一个地方，不会影响其他的兄弟盒子
（2）父盒子需要加定位限制子盒子在父盒子内显示，否则子盒子就会以浏览器为基准进行偏移
（3）父盒子布局时，需要占有位置，因此选择绝对定位（不脱标）
总结：父级需要占用位置，因此是相对定位。子盒子不用占用位置，就是绝对定位

注意：子绝父相不是永远不变，如果父元素不需要站位置，子绝父绝也是可以的

4、定位的叠放顺序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时可以使用z-index控制盒子的前后次序（z轴）

div{
	z-index:1; 
}

（1）数值可以是正整数、负整数或0.默认是auto,数值越大，盒子越靠上
（2）如果属性值相同，则按照书写顺序，后来居上
（3）z-index值没有单位‘
（4）只有定位的盒子才有z-index属性

one
two
three

5、定位的拓展 5.1 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto实现水平居中
实现方法：
（1）需要定位的盒子挪到父盒子的50%
（2）需要定位的盒子向左挪动本身的一半宽度

5.2 定位特殊特性

绝对定位和固定定位与浮动类似
（1）行内元素添加绝对定位或固定定位，可以直接设置高度和宽度
（2）块级元素添加绝对或固定定位，如果不给宽度或高度，默认大小是内容的大小

span
div内容

5.3 脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

5.4 绝对（固定）定位会完全压住盒子

（1）绝对（固定）定位元素会压住下面的标准流盒子及盒子中的文字图片

我是标准流

（2）与浮动元素不同，浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里的文字或图片
原因：浮动产生的目的是做文字环绕效果的

我是标准流

你是否还在寻找稳定的海外服务器提供商？创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源，准确流量调度确保服务器高可用性，企业级服务器适合批量采购，新人活动首月15元起，快前往官网查看详情吧

网站栏目：17.前端笔记-CSS-定位-创新互联
网页路径：http://cxhlcq.com/article/cchjoi.html