html和css 定位总结_html css 绝对定位-CSDN博客

本文链接：https://blog.csdn.net/m0_62487693/article/details/129104895

position 属性指定了元素的定位类型。
position 属性的五个值：
       static(静态的)   元素的默认值，即没有定位，遵循正常的文档流对象静态定位的元素不会受到 top, bottom, left, right影响。
       relative (相关的相对的) 相对定位元素的定位是相对其正常位置。
       fixed (固定好的) 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：移动相对定位元素，但它原本所占的空间不会改变。
       absolute (绝对定位) 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
                 absolute 定位使元素的位置与文档流无关，因此不占据空间。 absolute 定位的元素和其他元素重叠。
       sticky   (粘，粘贴，所以可以把它称之为粘性定位)
       粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
       它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
       元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
       这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
1.相对定位:
    /* 相对定位 */
    1。只设置相对定位，元素没有任何影响要有影响要通过设置偏移量 left top right bottom；
    2.设置相对定位的元素，一旦设置偏移量，元素会按照指定的位置进行移动
    3.盒子原来的空间一直存在设置相对定位元素是破坏文档流移动
    4.参考目标盒子原来的位置
    5.使用场景，对元素进行微调的时候
            left：距离参考位置左边缘的间距 top 距离参考目标上边缘的间距
        父盒子移动子元素设置相对定位，参考父盒子移动后的相对位置
        position: relative;
       left: ;
       top:;

2.重叠的元素
   元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
   z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

3. 设置静态定位 position 定位 static 静态     基本不用，是一个默认值
       position: static;

4.绝对定位
1.设置绝对定位的元素会脱离文档流，原来的空间不占用位置
2.元素只设置绝对定位，当前位置脱离文档流一旦设置偏移量，绝对定位元素进行移动
3.默认参考整个文档进行定位（没有别的任何定位信息）
4。子绝父相{子元素绝对定位父元素相对定位}
5.后代定位元素会覆盖前面对位的元素
6.行内元素设置绝对定位后，元素支持宽高
   7.使用场景：需要脱离文档流，覆盖在其他元素上方
      8.定位父级：通过设置相对定位，绝对定位，固定定位决定了元素的参考位置
      9.多个定位父级，则参考最近的定位父级
      10.常用相对定位是因为不会脱离文档流，对元素自身没有影响
绝对定位的盒子居中(页面正中间):
   position: absolute;
    /* 父容器的一半 */
    left: 50%;
    margin-left: -100px;
    top:50%;
    margin-top:-100px;    {transform：translate（-100px，0）}

   （ position: relative; /*给父元素设置子元素参考父元素位置*/
    position: absolute; /*子元素绝对定位子元素则参考父元素为参考目标*/
      left: ;
      top:;
   ）

    加了绝对定位的元素会脱离文档流
    语法： position: absolute;
        left: ;
        top:;

5.固定定位, 例如侧边栏固定,
    语法:position: fixed;
        left:   top：   right:   bottom:
    1.设置固定定位会脱离文档流(标准流)
    2.盒子固定在页面上,不会随着页面的移动而移动
    3.参考目标是整个文档
    4.应用场景:头部导航的固定,侧边栏,小广告,登陆的弹出框,小视频....
    5.固定定位必须加宽度高度

    固定定位在版心右侧的位置
     1.让固定定位的盒子left:50%; 走到可视区域的一半位置
     2.让固定定位的盒子 margin-left: 版心宽度的一半距离(夺走版心宽度的一般距离)

6.粘性定位
   语法: position: sticky; (必须设置方位名词)
     这个元素距离上面边缘的位置为0的时候就变成了粘性定位类似于固定定位不常用:兼容性差
        position: sticky;
         top: 0;
    粘性定位的特点:
    1.粘性定位占有原先的位置(相对定位的特点)
    2.参考目标是以浏览器窗口为移动位置(固定定位的特点)
    3.必须添加top/bottom/right/left 才有效

7.定位的特殊性
   1.行内元素添加绝对定位 absolute 或者固定定位 fixed ,可以直接设置宽高
   2.块级元素添加绝对定位 absolute 或者固定定位 fixed ,如果不设置宽高则默认大小是内容的大小

8.定位层级
   语法: z-index
   多个元素定位(固定定位相对定位绝对定位)后面的元素会覆盖前面的元素
    这个属性只针对相对定位绝对定位固定定位只有定位的盒子才有这个属性
    z-index: ;设置定位层级 auto是默认值相当于数字0    数字越大层级越高   如果数值相同的情况下后来者居上