首页 css 正文

我要投稿

css 固定定位-CSS 基础知识 - 定位

bendan520 css

2023-08-23 0 971 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

CSS中一般使用position属性来确定元素的定位方式。

常用的定位方法一般有

价值

意义

相对的

相对定位

绝对

绝对定位

固定的

固定定位

相对定位

位置设置为相对。

相对定位是指通过使用 top 和 left 等属性将元素相对于其原始位置连接起来，以将其显示在新的位置。

相对定位的元素实际上是连接的，但是之前的位置并没有被丢弃，连接后也不会占用原来元素的位置（但是原来的位置会被封顶）。

相对定位一般用于微调元素的位置；相对定位可以作为下面要讨论的绝对定位的参考坐标。

属性

价值

影响

顶部

像素、百分比等

相对于原来的位置，与上面联通的距离可以为负值

左边

像素、百分比等

相对于原始位置，距联通右侧的距离，可以为负值

正确的

像素、百分比等

相对于原始位置css 固定定位，距右链接的距离可以为负值

底部

像素、百分比等

相对于原始位置，距底部链接的距离可以为负。

相对定位示例

像素描述位置

box2 启用了相对定位并在新位置呈现。

                  相对定位概念          * {        margin: 0;        padding: 0;      }
      p {        width: 100px;        height: 100px;        background-color: orange;        border: 1px solid #000;      }
      .box2 {        position: relative;        top: 102px;        left: 102px;      }

百分比法

如果相对定位中，上、左、下、右写为比例，则表示它们在父容器中显示的比例位置。

例子

父元素的宽和高均为 200px。如果启用子元素的相对定位，则子元素位置如下。

                  相对定位概念          * {        margin: 0;        padding: 0;      }      div {        width: 200px;        height: 200px;        border: 1px solid #000;        margin: 40px auto;      }
      p {        position: relative;        top: 50%;        left: 50%;        width: 100px;        height: 100px;        background-color: orange;      }

绝对定位

位置设置为绝对。

绝对定位的元素在浏览器中具有绝对位置，可以通过坐标来描述。

绝对定位的元素脱离了标准文档流，释放了它们原来的位置；与此同时，他们在新职位上涵盖了其他要素。

绝对定位的元素将在其祖先元素中寻找具有定位属性的元素作为参考点。该祖先元素通常是相对定位的。

如果绝对定位的元素找不到具有定位属性的祖先元素作为参考点，它将相对于 IBC（初始包含块，可以认为是 HTML 根元素）进行定位。

属性

价值

影响

顶部

像素、百分比等

相对于参考点的位置，参考点上方距联通的距离可以为负值

左边

像素、百分比等

相对于参考点的位置，参考点右侧到联通的距离css 固定定位，可以为负值

正确的

像素、百分比等

相对于参考点的位置，参考点右侧到联通的距离，可以为负值

底部

像素、百分比等

相对于参考点的位置，距参考点的距离可以是负值。

例子

参考点IBC

参考点是IBC。此时top、left、bottom、right都是通过HTML和节点来描述元素的位置。

                  绝对定位释放自己位置的示例          * {        margin: 0;        padding: 0;      }      div {        width: 200px;        height: 200px;      }      .box1 {        background-color: orange;      }      .box2 {        background-color: green;        position: absolute;        top: 230px;        left: 200px;      }      .box3 {        background-color: blue;      }                          alalaladdddddddddddddddddddddddddddddddddd      alalaladdddddddddddddddddddddddddddddddddd      alalaladdddddddddddddddddddddddddddddddddd      alalaladdddddddddddddddddddddddddddddddddd      alalaladdddddddddddddddddddddddddddddddddd      alalaladdddddddddddddddddddddddddddddddddd      alalaladdddddddddddddddddddddddddddddddddd

参考点用于定位元素

最经典的是在父节点上启用相对定位，在子元素上启用绝对定位；此时top、left、bottom、right都是通过父元素的位置来描述子元素的。

                  子绝父相          * {        margin: 0;        padding: 0;      }      .box1 {        width: 402px;        height: 402x;        border: 1px solid #000;        padding: 100px;        margin: 0 auto;        position: relative;      }
      .box2 {        width: 200px;        height: 200px;        padding: 50px;        border: 1px solid #000;        position: relative;      }
      .box3 {        width: 50px;        height: 50px;        border: 1px solid #000;        position: absolute;        top: 0px;        left: 0px;        background-color: orange;      }                      dual

固定定位

位置设置为固定。

无论页面如何下拉，元素始终会固定在一个位置。

固定定位仅指页面，同样脱离了标准文档流。

固定定位用途：

用于长页面内容、返回底部功能等。

用于制作CSS精灵（现在很少使用）

                固定定位demo            .box {            position: fixed;            top: 100px;            left: 100px;            width: 100px;            height: 100px;            background-color: red;        }
        body {            height: 100000px;        }

级联属性

对于上面描述的定位元素，它们可能会在渲染位置覆盖原始元素。在某些情况下我们不希望这种情况发生。

此时就用到了 z-index 属性。它的值是一个正整数，值越大，里面显示的越多。

                z-index属性演示            .box1 {            width: 300px;            height: 300px;            background-color: orange;            position: absolute;            top:100px;            left: 100px;            z-index: 2;        }
        .box2 {            width: 300px;            height: 300px;            background-color: green;            position: absolute;            z-index: 10;        }