CSS定位详解

最新推荐文章于 2023-03-12 22:58:12 发布

原创最新推荐文章于 2023-03-12 22:58:12 发布 · 237 阅读

CC 4.0 BY-SA版权

本文深入探讨了CSS中的四种定位机制：普通流、绝对定位、相对定位和固定定位。普通流是默认的布局方式，元素按顺序排列。绝对定位脱离普通流，根据最近的定位父元素定位；相对定位则在普通流基础上偏移。固定定位则是相对于浏览器窗口定位，不会随滚动条移动。理解这些定位方式对于精确控制网页布局至关重要。

一、CSS定位机制

1.普通流
2.浮动定位
3.绝对定位
除非专门指定，否则所有框都在普通流中定位。普通流中的元素的位置由元素在 HTML 中的位置决定。
块级框从上到下一个接一个地排列
行内框在一行中水平布置
display
代码：

<body>
    <div class="box1">
        <h1>1</h1>
    </div>
    <div class="box2">
        <h1>2</h1>
    </div>
    <div class="box3">
        <h1>3</h1>
    </div>
    <span class="box4">
        4
    </span>
    <span class="box5">
        5
    </span>
    <span class="box6">
        6
    </span>
</body>

二、CSSposition属性

1.静态定位（static）
一般的标签元素不加任何定位属性都属于静态定位，在页面的最底层属于标准流。（普通流）
2.绝对定位（absolute）
（1）绝对定位的元素从文档流中拖出，使用left、right、top、bottom等属性相对于其最接近的一个最有定位设置的父级元素进行绝对定位，如果元素的父级没有设置定位属性，则依据 html 元素左上角作为参考进行定位。
（2）绝对定位元素可层叠，层叠顺序可通过 z-index 属性控制，z-index值为无单位的整数，大的在上面，可以有负值。
（3）absolute 定位使元素的位置与文档流无关，因此不占据空间。

代码：

<style>
        .box3{
            width: 100px;
            height: 100px;
            background-color: chocolate;
            position: absolute;
            top:50px;
            left: 50px;
            
        }
</style>
<body>
        <div class="box1">
            <h1>1</h1>
        </div>
        <div class="box2">
            <h1>2</h1>
        </div>
        <div class="box3">
            <h1>3</h1>
        </div>
        <div class="box4">
            <h1>4</h1>
        </div>
</body>

3.相对定位（relative）
（1）依据left、right、top、bottom等属性在正常文档流中偏移自身位置。
（2）可以用z-index分层设计。
（3）移动相对定位元素，但它原本所占的空间不会改变。（普通流）
（4）相对定位元素经常被用来作为绝对定位元素的容器块。
relative
代码（html同上）：

.box3{
            width: 100px;
            height: 100px;
            background-color: chocolate;
            position: relative;
            top:50px;
            left: 50px;
            
        }

4.固定定位（fixed）
（1）固定定位与绝对定位类似，位置与文档流无关，因此不占据空间，可层叠。
（2）它是相对于浏览器窗口定位，并且不会随着滚动条进行滚动。（绝对定位）
5.粘性定位（sticky）
在 position:relative 与 position:fixed 定位之间切换，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。