HTMLCSS学习笔记（九）——定位与锚点

最新推荐文章于 2022-07-23 11:11:24 发布

粽子师兄

最新推荐文章于 2022-07-23 11:11:24 发布

阅读量318

点赞数 1

分类专栏： HTML\CSS 文章标签： html5 css3 css html

本文链接：https://blog.csdn.net/qq_45268602/article/details/107949121

版权

HTML\CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

CSS 有三种基本的定位机制

普通流：元素的类型决定了其在HTML
浮动流：添加了浮动的元素会脱离文档流
定位流：相对定位是根据普通流移动，绝对定位和固定定位脱离普通流

定位属性：position

position 属性指定了元素的定位类型。

position:static; 静态定位（默认值）
position:relative; 相对定位
position:absolute; 绝对定位
position:fixed; 固定定位
position:sticky; 粘性定位

定位的参照物

position:relative;参照物：当前元素在文档流中的位置，不脱离文档流。
position:absolute;参照物：body或者距离当前元素最近的包含块，脱离文档流。
position:fixed;参照物：浏览器窗口，脱离文档流。
position:sticky;参照物：没有触发滚动条前与relative相同，触发滚动条后与fixed相同。

包含块的概念
就是为绝对定位元素提供坐标，偏移和显示范围的参照物，即确定绝对定位的偏移起点和百分比长度的参考。
默认状态下，body是一个大的包含块，所有绝对定位的元素都是根据窗口来定自己所处的位置和百分比大小的显示的，如果我们定义了包含元素为包含元素块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来定位自己的显示位置。
定义元素为包含块
给绝对定位元素的父元素添加声明position:relative;
一个demo了解定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 1500px;
        }
        div{
            font-size: 18px;
            color: #fff;
            text-align: center;
            margin: 30px auto;
        }
        .box1{
            position: static;
            width: 200px;
            height: 200px;
            background: red;
        }
        .box2{
            position: relative;
            left: 100px;
            width: 200px;
            height: 200px;
            background: green;
        }
        .box3{
            position: absolute;
            top: 50px;
            width: 200px;
            height: 200px;
            background: blue;
        }
        .box4{
            position: relative;
            width: 200px;
            height: 200px;
            background: blueviolet;
        }
        .box4_1{
            position: absolute;
            top: 50px;
            width: 150px;
            height: 150px;
            background: brown;
        }
        .box5{
            position: fixed;
            width: 200px;
            height: 200px;
            background: lawngreen;
            bottom: 0;
        }
        .box6{
            position: sticky;
            width: 100%;
            height: 100px;
            top: 0;
            background: lightcoral;
        }
    </style>
</head>
<body>
    <div class="box1">
        静态定位static        
    </div>
    <div class="box2">
        相对定位relative
    </div>
    <div class="box3">
        绝对定位absolute，包含块为body
    </div>
    <div class="box4">
        box4
        <div class="box4_1">
            绝对定位absolute，包含块为当前元素box4_1最近的包含块box4
        </div>
    </div>
    <div class="box5">
        固定定位fixed
    </div>
    <div class="box6">
        粘性定位
    </div>
</body>
</html>

定位的层级属性

z-index : auto |number 检索或设置对象的层叠顺序。

auto：默认值。遵从其父对象
number:无单位的整数值。可为负数
没有设置z-index时，最后写的对象优先显示在上层，设置后，数值越大，层越靠上；
较大数值的对象会覆盖在较小数值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。
此属性仅仅作用于 position 属性值 relative 或 absolute,fixed 的对象。