z-index和定位

璁蒈

已于 2023-04-22 18:53:53 修改

阅读量371

点赞数 1

文章标签：笔记 css html

于 2023-04-15 17:13:34 首次发布

本文链接：https://blog.csdn.net/m0_73936682/article/details/130045811

版权

nth-child(n)

在style中设置，设置括号里面，
（n+6）表示从第六个开始
（odd）奇数
（even）偶数
：nth-child(n+2):nth-child(-n+9) 从第2个到第9个

定位

某个元素可以自在在盒子移动位置，并且压住其它盒子
滚动窗口时，盒子时固定屏幕某个位置的
浮动让多个块级盒子一行没有缝隙

定位组成

定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

1、定位模式

通过position属性来设置在这里插入图片描述

2、边偏移

定位的盒子移动到最终位置，有top/bottom/left/right4个属性。
在这里插入图片描述

静态定位static（了解）

选择器 {position:static;}
按照标准流特性摆放位置，没有边偏移

相对定位relative（重要）

position : relative;相对于原来位置来说
top：100px;相对于原来位置往下移100像素/距离上方100px
left: 80px;相对于原来位置向右移动80PX
移动后，原来位置继续占有，后面盒子仍然以标准流对待

绝对定位absolute（重要）

是相对于它祖先元素{position:absolute;}

特点：

没有祖先元素或者祖先元素没定位，以浏览器为准
以最近一级带有定位祖先元素的为参考移动位置
绝对定位不再占有原来位置

子绝父相

浮动只会影响后面的盒子，浮动很难布局位置
对父级元素同时加浮动和定位都没问题

固定定位fixed

元素固定浏览可视区的位置
语法{position:fixed;}
以浏览器可视窗口为参照点移动元素
. 跟父元素没有任何关系
. 不占有原先位置

固定定位小技巧：固定在版心右侧位置
. 走浏览器宽度的一半
. 走版心的一半

left: 50%;
            margin-left: 450px;

粘性定位

相对定位和绝对定位的混合
语法{position:sticky;top:10px;}

以浏览器可视窗口为参照点移动元素（固定定位）
占有原先的位置（相对定位）
必须添加top/left/right/bottom其中一个才有效

<style>
      body {
        height: 2300px;
      }
      .nav {
        position: sticky;
        top: 10px;
        /* 距离可视区上端10px时不再移动位置 */
        margin: 200px auto;
        width: 200px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="nav">daohang</div>
  </body>

在这里插入图片描述

nth-child(n)

在style中设置，设置括号里面，
（n+6）表示从第六个开始
（odd）奇数
（even）偶数
：nth-child(n+2):nth-child(-n+9) 从第2个到第9个

定位叠放次序z-index

z轴，z-index属性的值越大（不加单位），元素的层级越高，发生重叠时，层级高的元素会覆盖在层级低的元素的上面

规则：

只有定位才有z-index属性
父元素设置了z-index属性时，子元素的z-index属性只于同级元素和父级元素做比较时才有意义，与其它元素比无意义
父元素未设置z-index属性，子元素的z-index属性与父元素外的所有外部元素对比，都以元素本身的in-dex属性值为准进行对比

属性值：

auto（默认值）：与父级元素层级相等、number:整数值，数值越大，层级越高、inherit:继承父元素的z-index的属性值

使用范围

z-index 属性只有在设置； position:relative|absolute|fixed的元素和父元素设置了display:flex属性的子元素中起作用

使用场景

1、同级元素之间

（属性值比较，然后书写顺序）

z-index属性值大，显示在前面
属性值相等，按照书写顺序
一个设置，一个未设置，未设置的index默认为0，再进行比较

2、父子元素之间

父元素未设置z-index时，子元素设置了z-index属性
子元素属性>=0，子元素高于父元素层级
<0时，子元素低于父元素层级
父元素设置了z-index属性值，子元素未设置z-index属性
子元素层级永远高于父元素
父元素设置了z-index属性值，子元素也设置了z-index属性
同2（只要父元素设置了，子元素总是比父元素层级高）

3、子元素与其它父元素外的其它元素

父元素未设置z-index属性，子元素z-index属性值与父元素的同级元素z-index属性值进行对比。直接父元素和子元素分别和另外一个父元素比较
父元素设置了z-index属性，和另外一个父级元素比较，通通以父元素为主进行比较。
父级元素的子元素和另外父级元素的子元素。同样遵循上面的准则。
父级均为设置：子元素与父元素进行比较，再将第一次比较重层级低的进行比较，然后将高的进行比较，最后再将第二次比较中层级高的与第三次比较中层级低的进行比较（父与子，父与子，然后分开分别比较）
父级均设置了z-index属性，子元素属性只有与同级元素和父级元素作比较时才有意义。此时子元素与父元素外的所有外部比较，都以父亲为主
一个父级设置了z-index,一个父级未设置。和上面结合比较（父元素有的，父元素代替比较，没有的自己比较）

拓展

1. 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin:0 auto;水平居中

left:50%

margin-left:盒子宽度的50%（负值）,实现了水平居中

<style>
      .nav {
        position: absolute;
        /* 水平居中 */
        left:50%;
        margin-left:-100px;
        /* 垂直居中 */
        top: 50%;
        margin-top:-50px;
        width: 200px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="nav">daohang</div>
  </body>

定位的特殊性

绝对定位和固定定位类似

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小就是内容的大小
脱标盒子不会触发外边距塌陷：浮动元素、绝对定位、固定定位都不会触发

 <style>
      span {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      div {
        position: absolute;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <span></span>
    <div>123</div>
  </body>

在这里插入图片描述
4. 绝对定位（固定定位）会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

<style>
      div {
        float: left;
        width: 300px;
        height: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
    <span>123iidzhgefeurfaeoihfsdhnv</span>
  </body>

在这里插入图片描述

div {
        position:absolute;
        width: 100px;
        height: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
    <span>123iidzhgefeurfaeoihfsdhnv</span>
  </body>