• 周日. 5月 26th, 2024

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

《定位相关知识》有2个想法
  1. Wow, marvelous blog structure! How lengthy have you ever been blogging for?
    you make blogging glance easy. The total glance of
    your site is great, let alone the content! You can see similar
    here e-commerce

  2. Wow, incredible blog format! How lengthy have you been blogging for?
    you make running a blog look easy. The entire glance of your site
    is wonderful, as neatly as the content material!

    You can see similar here najlepszy sklep

发表回复

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