定位

9个月前 (08-23) 597次浏览 已收录 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)

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