• 周日. 12月 10th, 2023

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

定位相关知识

admin

11月 28, 2021

定位相关
定位的组成:实际就是摆盒子 按照定位的方式移动盒子
定位=定位模式+边偏移

1、定位模式
通过position属性来设置

static 静态定位 默认的定位模式,按照标准流特性摆放位子,没有边偏移

relative 相对定位 典型的应用,就是给绝对定位当爹
1、移动位置的时候,相对于原来位置来说。
2、原来的位置继续占有,不脱标,继续保留原来位置

absolute 绝对定位 在移动位置的时候,相对于他的祖先元素来说的
1、如果没有祖先元素或者祖先元素没有定位,以浏览器为准对齐
2、如果祖先元素有定位(相对、绝对、固定),则以最近一级的有定位元素为参考点移动位置
3、脱标,不保留原来位置

fixed 固定定位 固定于浏览器可视区的位置。可以在浏览器页面滚动时元素的位置不会改变
1、以浏览器的可视窗口为参照点移动元素
a.和父元素 没有任何关系
b.不随着滚动条的滚动而滚动
2、不占有原来的位置
固定定位也是脱标的,可以看作是一种特殊的绝对定位。
3.小技巧:固定到版心的右侧位置
小算法
a.先让固定定位的盒子left50%,走到浏览器可视区的一半位置
b.让固定定位的盒子利用margin走版心盒子的一半

sticky 粘性定位 可以被认为相对定位和固定定位的结合
1、以浏览器的可视窗口为参照点移动元素
2、占有原先的定位
3、必须添加边偏移才有效。

2、边偏移
定位的盒子移动的最终位置,这四个属性只能在定位中使用,标准流和浮动流都不能使用
top left right bottom
实例:
top:80px

3.定位的堆叠顺序
语法: 选择器{z-index:1;}
可以用z-index来控制盒子的前后次序
数值可以是正整数,负整数 0 默认是auto 数值越大盒子越靠上
如果数值相同,后来者居上
数字后面不要加单位
只有定位的盒子才有这个属性

拓展
1.绝对定位的盒子居中:加了绝对定位的盒子不能通过margin:0 auto 水平居中。
a.left走50% 父容器的一半
b.margin负值 往左边走自己盒子的一半

2.定位的特殊特性
a.行内元素加了据对或者固定定位,可以直接设置高度和宽度
b.块级元素加了绝对或者固定定位,如果不给宽高,默认大小是内容的大小

3.脱标的盒子不会触发外边距合并

4.绝对定位 固定定位会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但不会压住下面标准流盒子里的文字(图片)
但是绝对定位,会压住标准流所有的内容,包含文字。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注