css position定位

远方0905

已于 2022-09-26 14:29:54 修改

阅读量219

点赞数

分类专栏： html5+css 文章标签：定位元素

于 2019-11-06 22:39:44 首次发布

本文链接：https://blog.csdn.net/qq_43198727/article/details/102926767

版权

html5+css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

什么是定位?
定位
将盒子定位在某一个位置自由的漂浮在其他盒子的上面–（css离不开定位特别是最后的JS特效）
定位是用来布局，它是由两部分组成
定位= 定位模式 + 边偏移

先说一下什么是边偏移.
简单说，我们定位的盒子是通过边偏移来移动位置的
在CSS中，通过 top、 bottom、left和right属性定义元素的边偏移

边偏移属性	示例	描述
top	top: 80px	顶端偏移，定义元素相对于其父元素上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left: 80px	左侧偏移量定义元素相对于其父元素左边线的距离
right	right： 80px	右侧偏移量定义元素相对于其父元素左边线的距离
帝国为的盒子有了边偏移才有价值，一般情况下，凡是有定位地方必定有边偏移
定位模式(position)
在css中通过 position属性定义元素的定位模式语法如下：
选择器(position : 属性值; )
定位模式是由不同分类的，在不同情况下我们用到不同的定位模式

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
静态定位(static)
静态定位是元素默认定位方式表示无定位的意思，它相当于 border里面的none 不要定位的时候用
静态定位: 按照标准流特性摆放位置，他没有边偏移
注意:
静态定位在布局是我们几乎不用的(只做了解)

重要的来了
相对定位(releative)
1、相对定位是元素相对于它在原来标准流中的位置来说的(自恋型 )
2、相对于自己原来在标准流中位置来移动的
3、原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位
绝对定位是元素以带有定位的父级元素来移动位置(拼爹行)
特点
1、完全脱标 --完全不占位置；
2、父元素没有定位，以浏览器为准定位
源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绝对定位</title>
    <style type="text/css">
        .father {
            height: 350px;
            width: 350px;
            background-color: pink;
            margin: 100px;
            /*标准流的盒子总是以父级元素为准,移动位置*/
        } /* 如果父亲没有定位 那么以浏览器为准*/
        .son {
            height: 200px;
            width: 200px;
            background-color: purple;
           /* margin-left: 100px;*/
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body> 
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

这是给子元素设置定位以后，并没有给父亲设置定位，所以他是以浏览器为准进行移动的。在这里插入图片描述
他就会出现这样。
将元素依据最近的已经定位(绝对、固定或想对定位)的父元素进行定位
定位口诀:
子绝父相 ----子级是绝对定位，父级要用相对定位。
父级要占有位置所以要用相对定位，相对定位是可以站住位置的不让下面的元素跑上来，子级可以任意摆放，这就是子绝夫相的由来。
固定定位:(fixed)
固定定位是绝对定位的一种特殊形式: (认死理型)
1、完全脱标–完全不占用位置；
2、只认浏览器的可视化窗口 —浏览器可视窗口+边偏移属性来设置元素的位置；
跟父元素没有任何关系
不随滚动条滚动
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子绝父相</title>
    <style>
        .up {
            position: absolute;
            width: 1000px;
            height: 90px;
            background-color: pink;
        }
        .down {
            width: 1000px;
            height: 150px;
            background-color: purple;
        }
        .arr-l {
            position: absolute;
            top: 25px;
            left: 0px;
            width: 40px;
            height: 40px;
            background-color: #000000;
        }
        .arr-r {
            position: absolute;
            top: 25px;
            right: 0px;
            width: 40px;
            height: 40px;
            background-color: #000000;
        }
    </style>
</head>
<body>
    <div class="up"></div>
        <img src="../images/">
        <div class="arr-l"></div>
        <div class="arr-r"></div>
    <div class="down"></div>
</body>
</html>