CSS的定位属性Position解析

程序员文章站 2024-01-29 18:17:40

...

position（定位）

position属性是最基础、最常用的页面布局属性之一，那么position属性都有哪些值呢？每个值都是什么意思呢？

position 定位属性有5个值，这五个值分别是：

static ；
relative ；
fixed ；
absolute ；
sticky ；

static静态定位

默认值，即没有定位。正常文档流排列，不受top、bottom、left、right属性影响（也就是你设置了也不生效）。
页面布局：

<div class="static">我是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下

.static {
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(245, 232, 118);
background-color: lemonchiffon;
line-height: 100px;
}

CSS的定位属性Position解析

relative相对定位

在正常文档流排列的基础上，保持基本占位空间，可通过top、bottom、left、right属性来改变位置。会产生重叠。
页面布局

<div class="static">我是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我也是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下，设置了top=20px、left=20px，在正常占位的基础上产生了错位的效果。可是说是相对于自身正常文档流的基础上做了位置的改变

.relative {
position: relative;
top: 20px;
left: 20px;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(194, 243, 129);
background-color: rgb(233, 255, 205);
line-height: 100px;
}

CSS的定位属性Position解析

fixed固定定位

不受文档流的约束，不占用文档流空间，始终位于设定死的定位。会产生重叠。
页面布局

<div class="static">我是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="relative">我也是相对定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="fixed1">我是固定定位1号</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下，设置位置为top=30px、right=50px。如果内容超过一屏，即使滚动页面位置也不会发生变化。

.fixed1 {
position: fixed;
top: 30px;
right: 50px;

/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(129, 243, 190);
background-color: rgb(205, 255, 255);
line-height: 100px;
}

CSS的定位属性Position解析

absolute绝对定位

不受文档流的约束，不占用文档流空间，在其最近的已定位的父元素基础上做relative相对定位。如果没有已定位的父元素，则基于html。会产生重叠。
页面布局

<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="absolute_dad">我是绝对定位的父元素
<div class="absolute1">我是绝对定位1号</div>
<div class="absolute2">我是绝对定位2号</div>
</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>
<div class="static">我也是没有定位的静态定位</div>

样式如下，首先当前绝对定位的父元素是有定位的，图中可以发现绝对定位是是脱离文档流的围绕父元素做的位置变化。

.absolute_dad {
position: relative;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(131, 129, 243);
background-color: rgb(218, 205, 255);
line-height: 100px;
}
.absolute1 {
position: absolute;
top: 80px;
left: 100px;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(216, 129, 243);
background-color: rgb(249, 205, 255);
line-height: 100px;
}
.absolute2 {
position: absolute;
top: -80px;
right: 100px;
/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(207, 129, 243);
background-color: rgb(241, 205, 255);
line-height: 100px;
}

CSS的定位属性Position解析

sticky粘性定位

基于用户的滚动位置浏览，当目标元素正常在页面中显示的时候是relative定位，当目标元素超过页面的显示范围时是fixed固定定位在指定位置。会产生重叠。

样式如下，这里的top=0代表，当目标元素超过页面的显示范围时固定在页面显示的位置。

.sticky {
position: sticky;
top: 0;
z-index: 99;

/* 字体大小、边框、背景颜色、线高样式 */
font-size: 30px;
border: 2px solid rgb(243, 129, 144);
background-color: rgb(255, 205, 220);
line-height: 100px;
}

上动图
CSS的定位属性Position解析

z-index属性

当产生重叠时，可以通过z-index属性来设置堆叠顺序。这里将两个固定定位的z-index分别设置为100和98，将粘性定位的z-index设置为99。可以发现z-index的值越大层级越靠前。
全部代码

<!DOCTYPE html>
<html>

<body>
    <div class="static">我是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="relative">我是相对定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="relative">我也是相对定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="fixed1">我是固定定位1号</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="sticky">我“相对定位”和“固定定位”结合的粘性定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="absolute_dad">我是绝对定位的父元素
        <div class="absolute1">我是绝对定位1号</div>
        <div class="absolute2">我是绝对定位2号</div>
    </div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="fixed2">我是固定定位2号</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
    <div class="static">我也是没有定位的静态定位</div>
</body>

</html>

<style>
    .static {
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(245, 232, 118);
        background-color: lemonchiffon;
        line-height: 100px;
    }

    .relative {
        position: relative;
        top: 20px;
        left: 20px;
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(194, 243, 129);
        background-color: rgb(233, 255, 205);
        line-height: 100px;
    }

    .fixed1 {
        position: fixed;
        top: 30px;
        right: 50px;
        z-index: 100;
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(129, 243, 190);
        background-color: rgb(205, 255, 255);
        line-height: 100px;
    }

    .fixed2 {
        position: fixed;
        top: 220px;
        right: 250px;
        z-index: 98;
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(129, 243, 190);
        background-color: rgb(205, 255, 255);
        line-height: 100px;
    }

    .absolute_dad {
        position: relative;
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(131, 129, 243);
        background-color: rgb(218, 205, 255);
        line-height: 100px;

    }

    .absolute1 {
        position: absolute;
        top: 80px;
        left: 100px;
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(216, 129, 243);
        background-color: rgb(249, 205, 255);
        line-height: 100px;
    }

    .absolute2 {
        position: absolute;
        top: -80px;
        right: 100px;
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(207, 129, 243);
        background-color: rgb(241, 205, 255);
        line-height: 100px;
    }

    .sticky {
        position: sticky;
        top: 0;
        z-index: 99;
        /* 字体大小、边框、背景颜色、线高样式 */
        font-size: 30px;
        border: 2px solid rgb(243, 129, 144);
        background-color: rgb(255, 205, 220);
        line-height: 100px;
    }
</style>
<script>

</script>

戛然而止了。
更多前端知识欢迎扫码关注微信公众号：前端博学了没
ღ( ´･ᴗ･` )比心
CSS的定位属性Position解析

相关标签：前端博学了没 css css3

上一篇： Javaweb-服务端与客户端的信息识别-Session与Cookie

下一篇： Docker:19---Docker客户端与服务端TLS认证（Docker Remote API认证）

CSS的定位属性Position解析

目录

position（定位）

static静态定位

relative相对定位

fixed固定定位

absolute绝对定位

sticky粘性定位

z-index属性

line-height属性值为百分比和数字乘积因子的区别_html/css_WEB-ITnose

那些不常见却适用的CSS属性（二）

【CSS】【overflow】css中的overflow属性

关于css中的定位（position）

css里面的几个你不知道的属性_html/css_WEB-ITnose