就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。

定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。默认就是static。所以我们略过。

元素设置了定位以后，还要依靠4个方位属性来进行定位摆放。

方位属性：

  1. /*
  2. top：让元素相对于指定目标的顶部偏移指定的距离。
  3.   例如： top：10px; 表示距离顶部10像素
  4.  
  5. right：让元素相对于指定目标的右边偏移指定的距离。
  6.   例如： right：10px; 表示距离顶部10像素
  7.  
  8. bottom：让元素相对于指定目标的底部偏移指定的距离。
  9.   例如： bottom：10px; 表示距离顶部10像素
  10.  
  11. left：让元素相对于指定目标的左边偏移指定的距离。
  12.   例如： left：10px; 表示距离顶部10像素
  13. */

　　

  • 相对定位（relative）

相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。

  1.  .c1{
  2.             width: 200px;
  3.             height: 200px;
  4.             background-color: indianred;
  5.  
  6.         }
  7.  
  8.         .c2{
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: orange;
  12.             position: relative;
  13.             left: 200px;
  14.             top: 200px;
  15.  
  16.         }
  17.  
  18.         .c3{
  19.             width: 200px;
  20.             height: 200px;
  21.             background-color: lightblue;
  22.  
  23.         }

　　

  • 绝对定位（absolute）

绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。

轮播图案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         .outer .img img{
  13.              width: 590px;
  14.              height: 470px;
  15.         }
  16.  
  17.         .outer{
  18.              width: 590px;
  19.              height: 470px;
  20.              margin: 100px auto;
  21.              position: relative;
  22.              border: 1px solid red;
  23.         }
  24.  
  25.         .outer ul{
  26.             list-style: none;
  27.         }
  28.  
  29.         .outer .img li{
  30.              position: absolute;
  31.              top: 0;
  32.              left: 0;
  33.         }
  34.  
  35.         .outer .hide{
  36.             display: none;
  37.         }
  38.  
  39.         .outer .num{
  40.             position: absolute;
  41.             z-index: 100;
  42.             bottom: 16px;
  43.             left: 16px;
  44.  
  45.         }
  46.  
  47.         .outer .num li{
  48.            display: inline-block;
  49.             width: 16px;
  50.             height: 16px;
  51.             background-color: lightgray;
  52.             text-align: center;
  53.             line-height: 16px;
  54.             border-radius: 50%;
  55.             margin-left: 5px;
  56.         }
  57.  
  58.         .num li.current{
  59.             background-color: red;
  60.  
  61.         }
  62.  
  63.         .btn li{
  64.             position: absolute;
  65.             top:50%;
  66.             width: 30px;
  67.             height: 60px;
  68.             background-color: gray;
  69.             text-align: center;
  70.             line-height: 60px;
  71.             color: white;
  72.             margin-top: -30px;
  73.         }
  74.  
  75.         .btn .left_btn{
  76.             left: 0;
  77.         }
  78.  
  79.         .btn .right_btn{
  80.             right: 0;
  81.         }
  82.  
  83.     </style>
  84. </head>
  85. <body>
  86.  
  87. <div class="outer">
  88.       <ul class="img">
  89.             <li><a href=""><img src="https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt=""></a></li>
  90.             <li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt=""></a></li>
  91.             <li class="hide"><a href=""><img src="https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt=""></a></li>
  92.             <li class="hide"><a href=""><img src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt=""></a></li>
  93.             <li class="hide"><a href=""><img src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt=""></a></li>
  94.       </ul>
  95.  
  96.      <ul class="num">
  97.          <li class="current"></li>
  98.          <li></li>
  99.          <li></li>
  100.          <li></li>
  101.          <li></li>
  102.      </ul>
  103.  
  104.     <ul class="btn">
  105.         <li class="left_btn"> < </li>
  106.         <li class="right_btn"> > </li>
  107.     </ul>
  108. </div>
  109.  
  110. </body>
  111. </html>

　　

  • 固定定位（fixed）

固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3.   <head>
  4.       <meta charset="utf8">
  5.     <style>
  6.  
  7.         body{
  8.             margin: 0;
  9.         }
  10.  
  11.         .c1{
  12.             width: 100%;
  13.             height: 2000px;
  14.             background-color: lightgray;
  15.         }
  16.  
  17.         .c2{
  18.             width: 200px;
  19.             height: 60px;
  20.             background-color: yellowgreen;
  21.             text-align: center;
  22.             line-height: 60px;
  23.             position: fixed;
  24.             right: 20px;
  25.             bottom: 20px;
  26.         }
  27.  
  28.     </style>
  29.   </head>
  30.   <body>
  31.  
  32.    <div class="c1"></div>
  33.    <div class="c2">返回顶部</div>
  34.  
  35.   </body>
  36. </html>

　　

CSS——position定位属性的更多相关文章

  1. css - Position定位属性与层级关系

    今天同事发现一个有意思的问题,关于position的层级关系的,他要不说我也没注意过 测试后果然有趣,有待深入研究: <!DOCTYPE html> <html> <he ...

  2. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  3. CSS position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  4. CSS position定位属性

    css中的position属性是用于设置元素位置的定位方式 它有以下几种取值: static:默认定位方式,子容器在父容器中按照默认顺序进行摆放 absolute:绝对定位,元素不占据父容器空间,相当 ...

  5. 教你玩转CSS Position(定位)

    CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: static relative fixed absolute sticky 元素可以使 ...

  6. Css Position定位(简易版本)

    准备前的知识: 定位只对块级起作用.如div,p等元素是块级元素,如果是内联元素则可以先变成块级元素,display:block即可. 开始讲解: 定位共四种:static,fixed,relativ ...

  7. 【CSS】position(定位)属性

    关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...

  8. [CSS]position定位

    CSS position 属性 通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式. position 属性值的含义: static 元素框正常生成.块级元 ...

  9. <转载>DIV+CSS position定位方法总结

    如何学习DIV+CSS布局之position属性 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用 absolute. 任 ...

  10. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

随机推荐

  1. 全面支持JS/eTS应用开发，DevEco Studio 3.0 Beta4新版本发布

    原文:https://mp.weixin.qq.com/s/j5Cl48ZxzEmnnpfoM0pKJg ,点击链接查看更多技术内容. HUAWEI DevEco Studio(后文简称DevEco ...

  2. k8s之构建Mysql和Wordpress集群

    一.实验目的 基于Kubernetes集群实现多负载的WordPress应用.将WordPress数据存储在后端Mysql,Mysql实现主从复制读写分离功能. 工作负载 服务 持久卷 Mysql S ...

  3. MySQL集群入门（PXC）

    目标: 1.掌握PXC集群MySQL方案的原理: 2.掌握PXC集群的强一致性: 3.掌握PXC集群的高可用方案:硬件要求: 1.Win10x64企业版/linux/MacOS: 2.Docker虚拟 ...

  4. Linux0.12内核源码解读(2)-Bootsect.S

    大家好,我是呼噜噜,在上一篇文章聊聊x86计算机启动发生的事?我们了解了x86计算机启动过程,MBR.0x7c00是什么?其中当bios引导结束后,操作系统接过计算机的控制权后,发生了哪些事?本文将揭 ...

  5. 润乾报表与 ActiveReport JS 功能对比

    简介 润乾报表是用于报表制作的大型企业级报表软件,核心特点在于开创性地提出了非线性报表数学模型,采用了革命性的多源关联分片.不规则分组.自由格间运算.行列对称等技术,使得复杂报表的设计简单化,以往难以 ...

  6. oracle 数据库连接

    前言 关于oracle 数据库如何连接,我一开始以为和mysql 和 sql server一样,写好连接语句然后调用相应的dll. 知道我遇到了两个错误: 1.64位程序不能去驱动32位客户端 2.O ...

  7. 重新整理数据结构与算法(c#)—— 二叉树排序树[二十二]

    前言 什么是二叉堆排序呢? 就是上面这种,一个节点大于左节点,但是小于右节点,再我写的例子中会写出大于等于右节点. 那么如何让一个数组进行变成这种二叉树呢? 其实只要有规律就很简单. 第一个元素(0) ...

  8. springboot+thymeleaf+mybatis实现甘特图（代码非常详细）

    首先我们要明白:这个甘特图需要哪些动态数据. (1)需要:ID,tName,number,计划开始时间,开始时间,计划结束时间,结束时间,项目负责人,参与人,知情人ID,计划时长(可以计算得出的,不必 ...

  9. gRPC入门学习之旅（七）

    gRPC入门学习之旅(一) gRPC入门学习之旅(二) gRPC入门学习之旅(三) gRPC入门学习之旅(四) gRPC入门学习之旅(五) gRPC入门学习之旅(六) 3.6.创建gRPC的桌面应用客 ...

  10. 云上技术 | 混合云管理平台多Region架构

    简介: 随着现代化进程加速,企业业务规模和迭代速度也今非昔比,在已具备一定规模的中大型电力系统中,会面临着数字化升级的压力,包括复杂组织架构管理.计算资源弹性扩展.IT运维提效等需求.基于电力行业属性 ...