记录学习CSS day11（1.23）

归途归何处111

已于 2023-01-23 17:52:03 修改

阅读量91

点赞数

文章标签： css 学习前端

于 2023-01-23 16:57:20 首次发布

本文链接：https://blog.csdn.net/m0_74191756/article/details/128751971

版权

文章详细介绍了CSS中的定位技术，包括静态定位、相对定位、绝对定位、固定定位，强调了边偏移属性的作用和定位偏移的概念。绝对定位的居中方法、子绝父相原则以及z-index在处理元素重叠时的层叠顺序也得到了阐述。

摘要由CSDN通过智能技术生成

边偏移

用left、right、bottom、top这类方位元素来确定元素的位置，其基本格式如下：

选择器{
    属性1:属性值1;
    属性2:属性值2;
}

属性	定义
top	定义元素相对于其父元素上边线的距离
bottom	定义元素相对于其父元素下边线的距离
left	定义元素相对于其父元素左边线的距离
right	定义元素相对于其父元素右边线的距离

注：

若right与left同时出现，以left为准；
若bottom和top同时出现，以top为准。

定位偏移

在CSS中，position属性用于定义元素的定位模式，其基本格式如下：

选择器{
        position:属性值;
}

position属性值	定义
static	默认定位
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位，若没有父级元素则相对于浏览器窗口定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位static

静态定位是所有元素的默认定位方式，即各个元素在HTML文档流中默认的位置，在静态定位状态下，无法通过边偏移属性来改变元素的位置

相对定位relative

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。

我们来看看相对定位的用法和效果是怎么样的

<html>
 
<head>
  <style>
    div{
      position: relative;
      height: 300px;
      width: 500px;
      background-color: skyblue;
      left: 100px;
      right: 200px;
      /* right标签属性无用 */
      top: 50px;
      bottom: 200px;
      /* bottom标签属性无用 */
    }
  </style>
</head>
 
<body>
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <div>box1</div>
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
</body>
 
</html>

分析：由于相对定位使得盒子向下向右移动，使得部分文字被覆盖，box1相对它实际文档流的位置产生了偏移，这就是相对定位

绝对定位absolute

绝对定位的元素不再存在于正常文档流中。相反，它坐在它自己的层独立于一切。这是非常有用的：这意味着我们可以创建不干扰页面上其他元素的位置的隔离的 UI 功能，绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

<html>
 
<head>
  <style>
    div{
      position: absolute;
      height: 300px;
      width: 500px;
      background-color: skyblue;
      left: 100px;
      right: 2000px;
      /* right标签属性无用 */
      top: 50px;
      bottom: 200px;
      /* bottom标签属性无用 */
    }
  </style>
</head>
 
<body>
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <div>box1</div>
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
  <p>相对定位是将元素相对于它在标准流中的位置进行定位</p>  
</body>
 
</html>

分析：box1是绝对定位，而box1没有父级元素，绝对定位以窗口为标准向右向下移动，以为绝对定位是脱标状态，所以，所有的<p>标签之中没有预留盒子的位置

绝对定位设置居中

普通的盒子让其居中是左右盒子margin改为auto就可，但是对于绝对定位就无效了，要使定位的盒子也可以水平或者垂直居中，有一个方法，基本格式如下：

  选择器{
    position:absolute;
    left:50%;
    /* 让盒子的左侧在父级元素中间 */
    margin-left:-属性值1;
    /* 这个属性值应该为该盒子宽度的一半大小 */
    top:50%;
    /* 让盒子的上侧在父级元素中间 */
    margin-top:-属性值2;
    /* 这个属性值应该为该盒子高度的一半大小 */
   }

对于设置margin-left和margin-top的值，还有一个方法，基本格式如下：

transform: translate(-50%,-50%);

子绝父相

这句话的意思是“子级是绝对定位的话，父级要用相对定位”，绝对定位是将元素依据最近的已经定位的父元素进行定位。

分析：因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，而在父盒中布局时，需要占有位置，因此父级元素只能是相对定位。

固定定位fixed

固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素，当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位，当对元素设置固定定位后，具有以下特点

它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。
不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
具有行内块的性质，可以设置宽高，若没有设置宽度，以文本默认宽度显示

注：绝对定位和固定定位都会使元素模式转换为行内块模式

叠放次序z-index

当对多个元素同时设置布局时，定位元素之间有可能会发生重叠

不同的布局方式元素层级关系：标准流<浮动<定位
不同定位之间的层级关系：相对、绝对、固定默认层级相同，此时HTML中写在下面的元素层级会更高，覆盖上面的元素

要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0

z-index只接受无单位索引值，你不能指定你想要一个元素是z轴上的固定像素，它的工作方式是较高的值将高于较低的值，这取决于你使用的值。使用1和2将产生与1和无穷大相同的效果

z-index的默认属性值是0，取值大的，定位元素在层叠元素中居上
如果取值相同，则根据书写顺序，后写的覆盖先写的
只有定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性

补充：理解 z-index

你可以更改堆叠顺序吗？是的，你可以使用z-index属性。 “z-index”是对 z 轴的参考。你可以从源代码中的上一点回想一下，我们使用水平（x 轴）和垂直（y 轴）坐标来讨论网页，以确定像背景图像和阴影偏移之类的东西的位置。（0,0）位于页面（或元素）的左上角，x 和 y 轴跨页面向右和向下（适合从左到右的语言，无论如何）。

网页也有一个 z 轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。z-index 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈中。默认情况下，定位的元素都具有 z-index 为 auto，实际上为 0

——转载自MDN

<html>

<head>
  <style>
    div {
      height: 100px;
      width: 300px;
    }
    .one{
      position: absolute;
      background-color: skyblue;
      left: 30px;
      top:30px;
    }
    .two{
      position:absolute;
      background-color: pink;
      left: 70px;
      top: 70px;
      z-index: 1;
    }
    .three{
      position:relative;
      background-color: orange;
      left:10px;
      top: 100px;
    }
  </style>
</head>

<body>
  <div class="one">box1</div>
  <div class="two">box2</div>
  <div class="three">box3</div>
</body>

</html>