• Css基础——Css的定位

    1、定位模式

    1.1、静态定位 static

    1.2、相对定位 relative

    postion:relative：

    1、是相对于自己本来的位置进行的边偏移

    2、它不会脱标，仍然会在它文件流时候应有的位置

    html：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./css/style.css">
    9. head>
    10.  
    11. <body>
    12.     <div class="first">div>
    13.     <div class="second">div>
    14. body>
    15.  
    16. html>

    css：

    1. .first {
    2.     width: 300px;
    3.     height: 300px;
    4.     background-color: red;
    5.     position: relative;
    6.     top: 20px;
    7.     left: 30px;
    8. }
    9.  
    10. .second {
    11.     width: 200px;
    12.     height: 200px;
    13.     background-color: blue;
    14.     position: static;
    15. }

    效果图：

    1.3、绝对定位 absolute

    position: absolute

    1、它的绝对是相较于祖先元素来定的，若其没有祖先元素或者是祖先元素没有定位的时候，就以浏览器为准定位

    2、若祖先元素都有定位（相对定位，绝对定位、固定定位）的时候，就会以最近一级有定位（相对定位，绝对定位、固定定位）的祖先元素为准进行定位

    3、绝对定位的元素会脱标

    html：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./css/style.css">
    9. head>
    10.  
    11. <body>
    12.     <div class="first">
    13.         <div class="second">
    14.             <div class="third">div>
    15.         div>
    16.     div>
    17.  
    18. body>
    19.  
    20. html>

    css：

    1. .first {
    2.     width: 300px;
    3.     height: 300px;
    4.     background-color: red;
    5.     position: relative;
    6.     top: 20px;
    7.     left: 30px;
    8. }
    9.  
    10. .second {
    11.     width: 200px;
    12.     height: 200px;
    13.     background-color: greenyellow;
    14.     /* position: relative; */
    15. }
    16.  
    17. .third {
    18.     width: 100px;
    19.     height: 100px;
    20.     background-color: gold;
    21.     position: absolute;
    22.     top: 30px;
    23.     left: 30px;
    24. }

    效果图： 

    解释说明：

    因为third盒子（黄色）采用的定位方法是绝对定位，所以它会想外层逐渐寻找有定位（相对定位、绝对定位、固定定位）的祖先元素去进行定位，又因为.second盒子没有采用定位，所以third盒子继续向外层寻找有定位的祖先元素（相对定位、绝对定位、固定定位）去完成自身的定位，然后寻找到first盒子，first盒子的定位方式是相对排序，所以可以满足third盒子的满足需要，所以third盒子以first盒子为准，进行了top: 30px;left: 30px的定位

    1.4、固定定位 fixed

    position: fixed;

    1、是以浏览器的可视窗口为参考点移动元素

    2、跟父元素没有关系、不随滚动条滚动

    3、会脱标

    小拓展：利用position: fixed；做一个紧贴网页版心的导航栏

    html：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./css/style.css">
    9. head>
    10.  
    11. <body>
    12.     <div class="main">div>
    13.     <div class="nav">导航栏div>
    14. body>
    15.  
    16. html>

    css:

    1. .main {
    2.     width: 1400px;
    3.     height: 2200px;
    4.     background-color: skyblue;
    5.     margin: auto;
    6. }
    7.  
    8. .nav {
    9.     position: fixed;
    10.     width: 100px;
    11.     height: 100px;
    12.     top: 30px;
    13.     left: 50%;
    14.     /* 先走浏览器页面宽的一半 */
    15.     margin-left: 700px;
    16.     /* 再走主版块宽的一半 */
    17.     background-color: pink;
    18. }

     效果图：

    1.5、粘性定位 sticky

    position: sticky

    1、以浏览器的可视窗口为参考的进行移动

    2、不脱标

    3、必须至少有left、right、top、bottom其中一个属性才生效

    html：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./css/style.css">
    9. head>
    10.  
    11. <body>
    12.     <div class="header">我是页面顶端的导航栏div>
    13.     <p>1p>
    14.     <p>2p>
    15.     <p>3p>
    16.     <p>4p>
    17.     <p>5p>
    18.     <p>6p>
    19.     <p>7p>
    20.     <p>8p>
    21.     <p>9p>
    22.     <p>10p>
    23.     <p>11p>
    24.     <p>12p>
    25.     <p>13p>
    26.     <p>14p>
    27.     <p>15p>
    28.     <p>16p>
    29.     <p>17p>
    30.     <p>18p>
    31.     <p>19p>
    32.     <p>20p>
    33.     <p>21p>
    34.     <p>22p>
    35.     <p>23p>
    36.     <p>24p>
    37.     <p>25p>
    38.     <p>26p>
    39.     <p>27p>
    40.     <p>28p>
    41.     <p>29p>
    42.     <p>30p>
    43. body>
    44.  
    45. html>

    css：

    1. .header {
    2.     width: 1400px;
    3.     height: 50px;
    4.     margin: auto;
    5.     margin-top: 70px;
    6.     position: sticky;
    7.     top: 10px;
    8.     background-color: skyblue;
    9. }

    效果图：

    2、定位的子绝父相

    3、定位的总结

    4、定位的叠放次序 z-index

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./css/style.css">
    9. head>
    10.  
    11. <body>
    12.     <div class="middle">div>
    13. body>
    14.  
    15. html>

    5、定位的拓展应用

             5.1、绝对定位的盒子居中

    通过加了绝对定位的盒子不能通过margin: 0 auto;达到水平居中效果

    解决方法：

    html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="./css/style.css">
    9. head>
    10.  
    11. <body>
    12.     <div class="middle">div>
    13. body>
    14.  
    15. html>

    css：

    1. .middle {
    2.     width: 100px;
    3.     height: 100px;
    4.     background-color: hotpink;
    5.     position: absolute;
    6.     left: 50%;
    7.     margin-left: -50px;
    8. }

    效果图：

    反思：

    同样也可以用下列代码实现垂直居中

    1. position: absolute;
    2. top: 50%;
    3. margin-top: -50px;

     5.2、定位的特殊性

    5.3、脱标的盒子不会触发外边距塌陷

    浮动元素、绝对定位、固定定位的元素都不会触发外边距合并的问题

    5.4、绝对定位、固定定位会完全压住盒子

    浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字( 图片)；

    box浮动的情况下：

    box在绝对定位的情况下：

  • 相关阅读:
    Makefile 变量值
    Cholesterol-PEG-Azide CLS-PEG-N3 胆固醇-聚乙二醇-叠氮 MW:3400
    百度笔试题面试题总结1
    00后干一年跳槽就20K，测试老油条表示真怕被这个“卷王”干掉····
    java Spring框架 XML配置和注解配置的区别
    PyTorch深度学习（二）【反向传播、用pytorch实现线性回归】
    【字符串函数内功修炼】strncpy + strncat + strncmp（二）
    第06章 MyBatisPlus概述
    Dubbo-Activate实现原理
    结构型模式-装饰器模式
  • 原文地址：https://blog.csdn.net/qq_38965505/article/details/136494944