CSS05 定位

最新推荐文章于 2024-07-12 20:49:16 发布

霄雨Blog

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量180

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_41225951/article/details/125952355

版权

title: CSS05 position
date: 2022-07-23 00:09:16
tags: position 定位

定位

基本概念

是一种更加高级的布局手段
通过定位可以让元素摆在页面的任意位置
使用position属性来设置定位

可选值

relative：相对定位

absolute：绝对定位

fixed：固定定位

sticky：粘滞定位

相对定位

当position的值设置为relative的时候，开启元素的相对定位

特点

元素开启相对定位，如果不设置偏移量，元素不会发生任何变化
相对定位是参照于元素在文档流中的位置进行的
相对定位会提升元素的层级

相对定位不会提高元素的文档流

 5. 相对定位不会改变元素的性质，块还是块，行内还是行内

偏移量

当元素开启了定位之后，可以通过偏移量来设置元素的位置

top

- 定位元素和定位位置上边的距离

bottom

- 定位元素和定位位置下边的距离

top 和 bottom控制垂直方向位置，通常情况只会使用其中之一

left

- 定位元素和定位位置左边的距离

right

- 定位元素和定位位置右边的距离

left 和 right 控制水平方向位置，通常情况只会使用其中之一

举例

<!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>
        body{
            font-size:40px;
            color:white;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: bisque;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: red;
            position:relative;
            top:-200px;
            left:200px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
</body>
</html>

绝对定位

positive: absolute;

特点

元素开启绝对定位，如果不设置偏移量，元素不会发生任何变化
绝对定位开启之后，元素会从文档流中脱离
绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
绝对定位会提高元素的层级
绝对定位相对于其包含块进行定位的,以padding的边为定位

包含块（containing block）

正常情况下：

包含块就是离当前元素最近的祖先块元素
绝对定位的包含块：

包含块离他最近的开启了定位的祖先元素

如果所有的祖先元素都没有开启定位，那么就相对于根元素（html）进行定位
html(根元素、初始包含块)

举例

<!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>
        body{
            font-size:40px;
            color:white;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: bisque;
        }
        .box4{
            height: 400px;
            width: 400px;
            background-color: orange;
            
        }
        .box5{
            height: 300px;
            width: 300px;
            background-color: yellowgreen;
            position: absolute;
            
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: red;
            position:absolute;
            top:0;
            left:0;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">4
        <div class="box5">5
            <div class="box2">2</div>
        </div>
    </div>
    <div class="box3">3</div>
    
</body>
</html>

固定定位

positive: 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>
        body{
            font-size:40px;
            color:white;
            height: 2000px;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: bisque;
        }
        .box4{
            height: 400px;
            width: 400px;
            background-color: orange;
            position: relative;
            
        }
        .box5{
            height: 300px;
            width: 300px;
            background-color: yellowgreen;
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: red;
            position: fixed;
            top: 0;
            left: 0;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">4
        <div class="box5">5
            <div class="box2">2</div>
            <div class="box3">3</div>
        </div>
    </div> 
</body>
</html>

粘滞定位

position: sticky;

特点

粘滞定位和相对定位的性质一样，不同的是，他会使元素到达某个位置时将其固定。这个某个位置的相对距离也是相对于包含块来说的。

应用一般是在导航条。

举例

<!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>
    <link rel="stylesheet" href="./css_reset/reset.css">
    <style>
        body{
            height:3000px;
            width:3000px;
        }
        .nav{
            width:1210px;
            height:48px;
            background-color: #E8E7E3;
            margin:50px;
            /* 粘滞定位 
            
            */
            position:sticky;
            top: 10px;
            left:10px;
        }
        .nav-list .item{
            line-height: 48px;
            float:left;
        }
        
        .nav-list .item a{
            float:left;
            text-decoration: none;
            color:#777;
            font-size:18px;
            padding: 0 39px;
        }
        .nav-list .item:last-child a{
            padding: 0 42px 0 41px;
        }
        .nav-list .item a:hover{
            background-color:#3F3F3F;
            color:#E8E7E3;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul class="nav-list">
            <li class="item">
                <a href="#">HTML/CSS</a>
            </li>
            <li class="item">
                <a href="#">Browser Side</a>
            </li>
            <li class="item">
                <a href="#">Server Side</a>
            </li>
            <li class="item">
                <a href="#">Programming</a>
            </li>
            <li class="item">
                <a href="#">XML</a>
            </li>
            <li class="item">
                <a href="#">Web Building</a>
            </li>
            <li class="item">
                <a href="#">Reference</a>
            </li>
        </ul>
    </div>
</body>
</html>

绝对定位元素的布局

水平布局：

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素的包含块的宽度

当开启绝对定位之后，增加了left和right：

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=父元素的包含块的宽度

此时规则和之前一样，只是多加了两个值。

当发生过渡约束时，则自动调整right，使其满足。

如果有auto，则自动调整auto的值使其满足。

可以设置auto的值有：width,margin-left,margin-right,left,right

因为left和right的值默认为auto，所以如果不知道left和right，则等式不满足时，会自动调整这两个值。

比如：如果margin: 0 auto; 不写left: 0; right: 0; 还是会调整left和right，而不会使块居中。所以想让块水平居中，必须要写left: 0; right: 0;

垂直方向布局的等式也必须满足：

top+margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom+bottom=包含块的高度

所以如果想要垂直居中，就直接写margin: auto 0; top: 0; bottom: 0;即可。

<!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>
        .box1{
            width: 500px;
            height: 500px;
            background-color: aqua;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            margin:auto;
            left:0;
            right: 0;
            top:0;
            bottom:0;
        }
        
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

元素层级 z-index

开启了定位元素，可以通过z-index属性来指定元素的层级。

z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高越优先显示。
如果元素层级一样，则优先显示结构上靠下的元素。
祖先元素的层级再高，也不会盖住后代元素

<!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>
         body{
            font-size:40px;
            color:white;
        }
        .box1{
            height: 200px;
            width: 200px;
            background-color: bisque;
            position:absolute;
            /* 
            开启了定位元素，可以通过z-index属性来指定元素的层级
                z-index需要一个整数作为参数，值越大元素的层级越高
                    元素的层级越高越优先显示

                    如果元素层级一样，则优先显示结构上靠下的元素

                    祖先元素的层级再高，也不会盖住后代元素
            */
            /* z-index:1; */
        }
        .box2{
            height: 200px;
            width: 200px;
            background-color: rgba(255,0,0,0.3);
            position: absolute;
            top:50px;
            left:50px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: black;
            position: absolute;
            top:100px;
            left:100px;
            z-index: 3;
        }
        .box4{
            height: 100px;
            width: 100px;
            background-color: orange;
            position: relative;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3
        <div class="box4">4</div>
    </div>
</body>
</html>