定位的认识

我是打工人

已于 2022-06-12 22:59:12 修改

阅读量277

点赞数 1

文章标签： html

于 2022-03-14 08:30:17 首次发布

本文链接：https://blog.csdn.net/szydqq/article/details/123309774

版权

1.调元素的位置可以使用浮动或者盒模型（实现一些覆盖效果）

2.定位三要素

- 对象自己

- 参照物自己的座位

- 方向顺时针

定位属性 position

3.属性值

- static 默认值静态定位设置或者不设置对元素的位置不影响

- relative 相对定位

- absolute 绝对定位

- fixed 固定定位

- sticky 粘性定位 css新增的属性值

相对定位

相对定位的使用

属性:position

属性值:relative

特点：

1.相对定位是相对于初始位置进行移动的

2.相对定位不会脱离文档流，依旧占据位置

3.有元素的层叠顺序==默认情况后者覆盖前者=可以通过z-index来调整层叠顺序

4.参考物：盒子本身

- 作用:(工具人) 主要是为了给绝对定位提供参照物

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
            margin: 0 auto;
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>
    <div>金来同学</div>
    文本
</body>
</html>

效果图：

绝对定位

绝对定位的使用

属性:position

属性值:absolute

绝对定位的参照物：默认情况浏览器窗口的第一个屏幕

特点：

1.元素加了绝对定位之后，会脱离文档流，不占据位置，后面元素向前补齐。（区别：浮动无法覆盖文字和图片（半脱离），绝对定位可以覆盖一切（全脱离）====浮动与绝对定位的区别）

2.如果给相邻的多个元素加绝对定位，这些元素会重叠在一起，重叠顺序（层叠顺序、堆叠顺序）：默认按照html的书写顺序，后者覆盖前者。（如果想调整元素的堆叠顺序，可以借助z-index来做调整的，这是一个css代码，
不带单位。）

参考物：默认情况浏览器窗口的第一个屏幕

- 如果没有有定位属性的时候就相对于父级位置进行移动

- 如果父级没有定位属性的时候，就会往上级查找直至找到浏览器

调整布局：

1.方法：使用方位名词

2.一个大盒子与小盒子调整位置===想让父亲变成参照物，前提是父亲必有定位模式（非静态），且儿子盒子都要加绝对、固定、粘性相对定位，不是静态模式就可以。====（口诀：子绝父相----推荐父亲的相对，这种搭配是最好的。）

3.子元素在找参照物的时候：先看父亲有无定位，如果有就是父亲，如果没有就一级一级向上找，如果都没有，就是浏览器的第一屏。

使用场景：实现覆盖效果

<!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>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background: green;
            margin: 0 auto;
            position: relative;
        }
        p{
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;
            left: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p>同学</p>
        文本
    </div>
</body>
</html>

效果图：

家父案例

<!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>Document</title>
    <link rel="stylesheet" href="../../02-reset.css">
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 2px solid #000;
            margin: 100px auto;
            position: relative;
        }
        p{
            width: 500px;
            height: 500px;
            background: url(https://img1.baidu.com/it/u=1875739781,4152007440&fm=253&fmt=auto&app=120&f=JPEG?w=1024&h=576)
        }
        ul{
            width: 500px;
            height: 50px;
            /* background: green; */
            position: absolute;
            bottom: 0;
        }
        li:nth-child(1){
            float: left;
            width: 50px;
            height: 50px;
            background: orange;
            text-align: center;
            line-height: 50px;
        }
        li:nth-child(2){
            width: 450px;
            height: 50px;
            background: rgba(00, 00, 00, 0.5);
            color: #fff;
            float: right;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
        <ul>
            <li>2</li>
            <li>马化腾:只有充钱你才能变得更强...</li>
        </ul>
    </div>
</body>
</html>

效果图：

固定定位

固定定位的使用

属性:position

属性值:fixed

- 特点：

1.固定定位是脱离文档流的，不占据位置。

2.使用场景：实现覆盖效果

3.参考物：浏览器窗口

使用场景：做小广告，做左右两侧的导航:聊天窗口、广告弹窗

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
            margin: 0 auto;
            position: fixed;
            right: 100px;
            bottom: 100px
        }
    </style>
</head>
<body>
    <div>同学</div>
    <p>1</p>
    <p>2</p>
    <p>3</p>
</body>
</html>

效果图：

粘性定位

属性：sticky

特点：不滚动的时候相当于相对定位，滚动的时候相当于固定定位。

使用场景：吸顶效果，比如顶部的导航栏

<!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>Document</title>
    <link rel="stylesheet" href="../../02-reset.css">
    <style>
        div{
            width: 100%;
            height: 100px;
            background: pink;
            position: sticky;
            top: 0;
        }
    </style>
</head>
<body>
    <div>导航</div>
    <p>店铺1</p>
    <p>店铺2</p>
    <p>店铺3</p>
    <p>店铺4</p>
    <p>店铺5</p>
    <p>店铺6</p>
    <p>店铺7</p>
    <p>店铺8</p>
    <p>店铺9</p>
</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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      height: 3000px;
    }

    div {
      width: 100%;
      height: 80px;
      background-color: skyblue;
    }

    .header {
      height: 60px;
      background-color: purple;

      position: sticky;
      top: 10px;
      left: 0;
      width: 600px;
    }

    .banner {
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div></div>
  <div class="header"></div>
  <div class="banner"></div>
</body>
</html>