CSS定位详解及案例

r囧r小猫 2023-02-22 13:40 153阅读 0赞

### 文章目录 ###

*   *  一、标准流
     *   *  1.1 概念
         *  1.2 不足
     *  二、定位
     *   *  2.1 概念
         *  2.2 static-静态定位
         *  2.3 relative-相对定位
         *   *  2.3.1 特点：
             *  2.3.2 示例一
             *  2.3.3 示例二
         *  2.4 fixed-固定定位
         *   *  2.4.2 特点
             *  2.4.2 示例
         *  2.5 absolute-固定定位
         *   *  2.5.1 特点
             *  2.5.2 子绝父相
             *  2.5.3 示例一
             *  2.5.4 示例二
         *  2.6 层叠关系
         *   *  2.6.1 元素层叠
             *  2.6.2 z-index特点：
             *  2.6.3 比较原则
             *   *  2.6.3.1 兄弟关系
                 *  2.6.3.2 如果不是兄弟关系
     *  三、小结
     *   *  3.1 对照表
         *  3.2 脱标元素特点

## 一、标准流 ##

### 1.1 概念 ###

默认情况下，元素都是按照Normal Flow(标准流、文档流、常规流、正常流)进行排布，从左到右、从上到下按顺序摆放，互相之间不存在层叠影响。

在标准流中，可以使用margin、padding对元素进行定位，其中margin还可以设置负数。

### 1.2 不足 ###

当设置一个元素的margin或padding时，通常会影响到标准流中其他元素的定位效果，也不便于实现元素层叠的效果。

## 二、定位 ##

### 2.1 概念 ###

CSS 为定位提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

利用position属性可以对元素进行定位，常用取值有：static、relative、absolute和fixed，下面对每个进行分析说明

### 2.2 static-静态定位 ###

*  position属性的默认值
 *  元素按照normal flow布局
 *  left、right、top、bottom没任何作用

### 2.3 relative-相对定位 ###

#### 2.3.1 特点： ####

*  元素按照normal flow布局
 *  可以通过 left、right、top、bottom进行定位
 *  定位参照对象是元素自己原来的位置
 *  left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示  
    ![在这里插入图片描述][20200703220214371.png]
    
     *  不脱档，原本占用的空间仍保留(ps:后面元素不会贴上来)

#box_relative { 
      position: relative;
      left: 30px;
      top: 20px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70]

#### 2.3.2 示例一 ####

完成如下效果：  
![在这里插入图片描述][20200703222325221.png]  
代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> sub, sup { font-size: 14px; } sub { position: relative; bottom: 6px; } sup { position: relative; top: 2px; } </style>
    </head>
    
    <body>
    
        <h1>请计算n<sub>1</sub>+n<sub>2</sub>+n<sup>2</sup>的值</h1>
    
    </body>
    
    </html>

#### 2.3.3 示例二 ####

已知网站`banner`宽度为`1920px`，在浏览器中加载显示，默认展示为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 1]  
要想让主内容居中显示的话(不论窗口大小)，就可以使用相对定位了，最终效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 2]  
实现代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> body{ margin: 0; padding: 0; } .box{ overflow: hidden; min-width: 1000px; } .box img{ position: relative; // 向左偏移图片宽度的一半，因banner宽度为1920，此处暂写死为960 left: -960px; // 将包含块向右偏移块宽度的50% margin-left: 50%; } </style>
    </head>
    <body>
        <div class="box">
            <img src="./images//banner.jpg" alt="">
        </div>
    </body>
    </html>

### 2.4 fixed-固定定位 ###

#### 2.4.2 特点 ####

*  元素脱离normal flow(脱标)
 *  可以通过left、right、top、bottom进行定位
 *  定位参照对象是视口(viewport)
 *  当画布滚动时，固定不变

#### 2.4.2 示例 ####

实现商城网站右侧悬浮固定效果，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 3]  
实现代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> ul { list-style: none; padding: 0; margin: 0; } i { font-style: normal; } .right-aside { position: fixed; right: 30px; top: 100px; border: 1px solid #eee; } .right-aside a { display: inline-block; width: 62px; height: 48px; padding-top: 12px; font-size: 12px; border-bottom: 1px solid #eaeaea; text-align: center; } .right-aside a:last-child { border-bottom: none; } .right-aside a i { display: block; width: 20px; height: 20px; margin: 0 auto 3px; /* background-color: rebeccapurple; */ } a { text-decoration: none; color: #333333; } .right-aside ul li a:hover { color: #ff1e32; background-color: #fefefe; } .signin i { background-image: url('./images/icon-aside-right-signin.png'); } .shopcart i { background-image: url('./images/icon-aside-right-cart.png'); } .download i { background-image: url('./images/icon-aside-right-phone.png'); } .top i { background-image: url('./images/icon-aside-right-top.png'); } .signin:hover i { background-image: url('./images/icon-aside-right-signin-active.png'); } .shopcart:hover i { background-image: url('./images/icon-aside-right-cart-active.png'); } .download:hover i { background-image: url('./images/icon-aside-right-phone-active.png'); } .top:hover i { background-image: url('./images/icon-aside-right-top-active.png'); } .right-aside ul .top:hover i { background-image: url("./images/icon-aside-right-top-active.png"); } </style>
    </head>
    
    <body>
    
        <div class="box">
            <div class="right-aside">
                <ul>
                    <li>
                        <a class="signin" href="">
                            <i class="signini"></i>
                            <span>签到</span>
                        </a>
                    </li>
                    <li>
                        <a class="shopcart" href="">
                            <i></i>
                            <span>购物车</span>
                        </a>
                    </li>
                    <li>
                        <a class="download" href="">
                            <i></i>
                            <span>下载</span>
                        </a>
                    </li>
                    <li>
                        <a class="top" href="">
                            <i></i>
                            <span>TOP</span>
                        </a>
                    </li>
                </ul>
    
            </div>
        </div>
    
    </body>
    
    </html>

### 2.5 absolute-固定定位 ###

#### 2.5.1 特点 ####

*  元素脱离normal flow(脱标)
 *  可以通过left、right、top、bottom进行定位
 *  定位参照对象是最近邻的祖先元素
 *  如果找不到这样的祖先元素，参照对象就是视口

#### 2.5.2 子绝父相 ####

*  在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位
 *  如果希望子元素相对于父元素进行定位，又不希望父元素脱标，那就设置父为相对定位，子为绝对定位

#### 2.5.3 示例一 ####

目标效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 4]  
实现代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> ul { list-style: none; padding: 0; margin: 0; } a { text-decoration: none; color: #333333; } .box { display: inline-block; } .item { position: relative; } .item ul { position: absolute; bottom: 36px; width: 285px; left: 0; right: 0; width: 280px; margin: 0 auto; text-align: justify; text-align-last: justify; } .item ul li { display: inline-block; } .item ul li a { display: block; width: 80px; height: 40px; font-size: 12px; border-radius: 40px; border: 1px solid #eeeeee; line-height: 40px; text-align-last: center; background-color: white; box-shadow: 0 0 0 1px rgba(0, 0, 0, 1); margin-top: 10px; } </style>
    </head>
    
    <body>
        <div class="box">
    
            <div class="item">
                <a href="">
                    <img src="./images/beauty-left-img.jpg" alt="">
                </a>
                <ul>
                    <li><a href="#">精致护肤</a></li>
                    <li><a href="#">人气面膜</a></li>
                    <li><a href="#">大牌彩妆</a></li>
                    <li><a href="#">精致护肤</a></li>
                    <li><a href="#">人气面膜</a></li>
                    <li><a href="#">大牌彩妆</a></li>
                </ul>
            </div>
    
        </div>
    
        </div>
    </body>
    
    </html>

#### 2.5.4 示例二 ####

实现效果：当鼠标悬浮在`手机考拉`上时，弹出下载二维码组件，如图：  
![在这里插入图片描述][20200704210242611.png]  
实现代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <style> .box { position: relative; font-size: 14px; margin-left: 300px; } .box span { display: block; /* text-align: center; */ } .box .downloadapp { display: none; position: absolute; text-align: center; border: 1px solid #eaeaea; padding: 1px 1px; left: -58px; top: 30px; margin-left: 30px; } .box .downloadapp span { display: block; text-align: center; } .arrow { position: absolute; left: 52px; top: -3px; width: 8px; height: 8px; background-color: white; border-left: 1px solid blue; border-top: 1px solid blue; transform: rotate(45deg); } .box span:hover + .downloadapp{ display: inline; } </style>
    
    </head>
    
    <body>
        <div class="box">
            <span>手机考拉</span>
            <div class="downloadapp">
                <div class="arrow"></div>
                <img src="./images/qrcode.png" alt="">
                <span>下载App</span>
                <span>领1000元新人礼包</span>
            </div>
        </div>
    </body>
    
    </html>

### 2.6 层叠关系 ###

#### 2.6.1 元素层叠 ####

![在这里插入图片描述][20200704221147806.png]

#### 2.6.2 z-index特点： ####

*  z-index用来设置定位元素的层叠关系，非定位预算内无无效
 *  取值可以为正整数、负整数和0
 *  默认值为auto

#### 2.6.3 比较原则 ####

##### 2.6.3.1 兄弟关系 #####

*  z-index越大，层叠越在上面
 *  z-index相等，写在后面的那个元素层叠在上面

##### 2.6.3.2 如果不是兄弟关系 #####

*  各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
 *  并且，这两个元素必须有设置z-index的具体数值

## 三、小结 ##

### 3.1 对照表 ###

各定位是否脱标及参照对象如下：  
![在这里插入图片描述][20200704221049692.png]

### 3.2 脱标元素特点 ###

*  可以随意设置宽度和高度
 *  宽高默认由内容决定
 *  不再受标准流的约束
 *  不再给父元素汇报宽高数据

[20200703220214371.png]: https://img-blog.csdnimg.cn/20200703220214371.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070617073280.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[20200703222325221.png]: https://img-blog.csdnimg.cn/20200703222325221.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200703231735427.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200703231926994.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200704114339954.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_1_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200704183338318.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_1,color_FFFFFF,t_70
[20200704210242611.png]: https://img-blog.csdnimg.cn/20200704210242611.png
[20200704221147806.png]: https://img-blog.csdnimg.cn/20200704221147806.png
[20200704221049692.png]: https://img-blog.csdnimg.cn/20200704221049692.png