• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085
> CSS > 定位

定位

2年前 (2021-08-23) 1274次浏览 已收录 0个评论 扫描二维码

定位导读

通过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>相对定位</title>
    <style>
        .box1{
            position: relative;
            top: 30px;
            left: 30px;
            width: 200px;
            height: 300px;
            background-color: blue;
        }
        .box2{
            width: 200px;
            height: 300px;
            background-color: rgb(255, 0, 76);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</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>绝对定位</title>
    <style>
        .box1{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 200px;
            height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</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>绝对定位</title>
    <style>
        .father{
            position: relative;
            width: 800px;
            height: 500px;
            background-color: rgb(31, 184, 151);
        }
        .box1{
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="father">

        <div class="box1"></div>
    </div>
</body>
</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>固定定位</title>
    <style>
        .gd{
            position:fixed;
            top: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
    <div class="gd">
       <h1>测试</h1>
    </div>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
    <p>饭撒了咖啡烘啊是嘎嘎</p>
</body>
</html>
结果演示

固定在版心右侧位置

  1. 让固定定位的盒子left：50%，走到浏览器可视区的一半位置
  2. 让固定定位的盒子margin-left，版心宽度的一半距离，就可以让固定定位的盒子贴着版心右侧对齐了

粘性定位（了解，后面js代替）

position:sitcky;

特点：

  • 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
  • 占有原先位置（相对定位特点）
  • 必须添加top、left、right、bottom其中一个才有效
<!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>粘性定位</title>
    <style>
        .n{
            position: sticky;
            top: 0;
        }
    </style>
</head>
<body>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <div class="n">测试</div>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
    <h1>s</h1>
</body>
</html>
结果演示

定位叠放次序

使用z-index来控制盒子的前后次序

  • z-index:1
  • 数值越大，盒子越靠上

绝对定位水平居中

  1. left走50%，父容器宽的一半
  2. margin 负值往左走自身盒子宽度的一半
加了绝对定位的盒子不能通过margin:0 auto水平居中，必须通过以上方法来实现居中

定位特殊性

  • 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
  • 块级元素添加绝对或者固定定位，如果不给宽高度，默认大小是内容的大小
  • 脱标的盒子不会触发外边距塌陷问题（浮动元素、绝对定位，固定定位都不会触发

拓展

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面的标准流盒子里面的文字（图片），但是绝对定位（固定定位）会压住下面的标准流所有的内容。

 

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：定位
喜欢 (1)

您必须 登录 才能发表评论！