[HTML5] CSS样式——position属性

最新推荐文章于 2024-07-04 18:06:06 发布

来一杯奶喵

最新推荐文章于 2024-07-04 18:06:06 发布

阅读量924

点赞数 6

文章标签： html5 html css

本文链接：https://blog.youkuaiyun.com/weixin_66327570/article/details/125701951

版权

position的属性值：

static（默认值）
relative（相对定位）
absolute（绝对定位）
fixed（固定定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: burlywood;
        }
        .div2{
            background-color: thistle;
        }
        .div3{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

一、static 默认值

没有定位，元素没有脱离文档流。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: burlywood;
        }
        .div2{
            background-color: thistle;
            position: static;
            top: 20px;
            left: 20px;
        }
        .div3{
            background-color: cadetblue;
        }
    </style>

二、relative 相对定位

相对于自身原来位置移动。

1.没有脱离文档流。

2.不影响周围元素（如果一个元素设置了相对定位并且不写偏移属性，意味这个元素对页面没有任何影响）。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: burlywood;
        }
        .div2{
            background-color: thistle;
            position: relative;
            top: 20px;
            left: 20px;
        }
        .div3{
            background-color: cadetblue;
        }
    </style>

三、absolute 绝对定位

相对于自身第一个position为非static的父元素进行定位。如果该标签所在的父标签均没有设置position为非static，则相对于浏览器窗口进行定位（相对于body标签进行定位），但是此时元素会随着滚动调的滑动而滑动。脱离文档流。

1.相对于浏览器窗口定位：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: burlywood;
        }
        .div2{
            background-color: thistle;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        .div3{
            background-color: cadetblue;
        }
    </style>

当div2有父标签，且父子标签均未设置position属性时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1,.div2,.div3{
            width: 100px;
            height: 100px;
        }
        .fu{
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            position: relative;
        }
        .div1{
            background-color: burlywood;
        }
        .div2{
            background-color: thistle;
        }
        .div3{
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="fu">
        <div class="div2"></div>
    </div>
    <div class="div3"></div>
</body>
</html>

2.当父元素有position属性且属性值不为static时，子元素div2的定位相对于自身第一个position为非static的父元素进行定位：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1,.div2,.div3{
            width: 100px;
            height: 100px;
        }
        .fu{
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            position: relative;
        }
        .div1{
            background-color: burlywood;
        }
        .div2{
            background-color: thistle;
            position: absolute;
            top: 20px;
            left: 20px;
        }
        .div3{
            background-color: cadetblue;
        }
    </style>

四、fixed 固定定位

相对于浏览器窗口进行定位（相对于body标签进行定位），此时元素不会随着滚动调的滑动而滑动。脱离文档流。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .div1{
            background-color: burlywood;
        }
        .div2{
            background-color: thistle;
            position: fixed;
            top: 20px;
            left: 20px;
        }
        .div3{
            background-color: cadetblue;
        }
    </style>