定位

最新推荐文章于 2024-09-10 22:55:28 发布

小&雄

最新推荐文章于 2024-09-10 22:55:28 发布

阅读量419

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46446238/article/details/112106264

版权

定位也称为摆盒子，定位可以让盒子自由的在某个盒子内部移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子；一个完整的定位需要有定位模式和边偏移

a.静态定位（了解）

静态定位是元素的默认定位方式，无定位的意思

<!-- 语法 -->
 选择器 { position:static ;}

b.固定定位（重要）

固定定位是元素固定于浏览器可视区的位置。

应用场景：可以在浏览器页面滚动时元素的位置不会改变

<!-- 语法 -->
选择器 {position : fixed ;}

特点：

i. 以浏览器的可视窗口为参照点移动元素：和父元素没有任何关系；不随滚动条滚动

ii. 固定定位不在占有原先的位置：即固定定位也是一种特殊的绝对定位

固定在版心的右侧位置（算法）：

算法：先让盒子固定定位在（浏览器可视区）left50%；在让固定的定位盒子在版心宽度的margin-left50%

c.相对定位（重要）

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

选择器 { position : relative;}

特点：相对于原来的位置移动的；原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（即不脱标，继续保持原来的位置）

d.绝对定位（重要）

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

选择器 { position : absolute;}

特点：如果没有（父）祖先元素或者（父）祖先元素没有定位，则以浏览器为准定位；如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考位置；绝对定位不在占有原先的位置（脱标）

最重要的是： 自绝父相：子级使用绝对定位，父级则需要相对定位

注意：有绝对定位的盒子不能通过margin： auto 来设置水平居中，但是可以通过先让盒子移动的父级元素（版心）的水平中心位置left : 50 % , 在让盒子向左移动自身宽度的一半 margin-left：x px ;

e.粘性定位（了解）

选择器 { position : sticky ; top : 10px ;}

特点：以浏览器的可视窗口为参照点移动元素（固定定位的特点）

粘性定位占有原先的位置（相对定a…位特点）

必须添加top 、left 、right、bottom其中的一个才有效

a. 行内元素添加绝对或者固定定位，可以直接设置宽度和高度

b. 块内元素添加绝对或固定定位后，如果不给大小，默认大小为内容的大小

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

d. 浮动的元素只会压住下面标准流的盒子，不会压住标准盒子里面的内容，但是绝对定位会压住下面标准流所有的内容

（1）比如说淘宝中国定的搜索栏

（2）让盒子自由的在某个盒子内部移动位置

关注