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

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

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

方位属性：

/*

top：让元素相对于指定目标的顶部偏移指定的距离。

  例如： top：10px; 表示距离顶部10像素

right：让元素相对于指定目标的右边偏移指定的距离。

  例如： right：10px; 表示距离顶部10像素

bottom：让元素相对于指定目标的底部偏移指定的距离。

  例如： bottom：10px; 表示距离顶部10像素

left：让元素相对于指定目标的左边偏移指定的距离。

  例如： left：10px; 表示距离顶部10像素

*/

　　

  • 相对定位（relative）

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

 .c1{

            width: 200px;

            height: 200px;

            background-color: indianred;

        }

        .c2{

            width: 200px;

            height: 200px;

            background-color: orange;

            position: relative;

            left: 200px;

            top: 200px;

        }

        .c3{

            width: 200px;

            height: 200px;

            background-color: lightblue;

        }

　　

  • 绝对定位（absolute）

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

轮播图案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .outer .img img{

             width: 590px;

             height: 470px;

        }

        .outer{

             width: 590px;

             height: 470px;

             margin: 100px auto;

             position: relative;

             border: 1px solid red;

        }

        .outer ul{

            list-style: none;

        }

        .outer .img li{

             position: absolute;

             top: 0;

             left: 0;

        }

        .outer .hide{

            display: none;

        }

        .outer .num{

            position: absolute;

            z-index: 100;

            bottom: 16px;

            left: 16px;

        }

        .outer .num li{

           display: inline-block;

            width: 16px;

            height: 16px;

            background-color: lightgray;

            text-align: center;

            line-height: 16px;

            border-radius: 50%;

            margin-left: 5px;

        }

        .num li.current{

            background-color: red;

        }

        .btn li{

            position: absolute;

            top:50%;

            width: 30px;

            height: 60px;

            background-color: gray;

            text-align: center;

            line-height: 60px;

            color: white;

            margin-top: -30px;

        }

        .btn .left_btn{

            left: 0;

        }

        .btn .right_btn{

            right: 0;

        }

    </style>

</head>

<body>

<div class="outer">

      <ul class="img">

            <li><a href=""><img src="https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt=""></a></li>

            <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>

            <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>

            <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>

            <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>

      </ul>

     <ul class="num">

         <li class="current"></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

     </ul>

    <ul class="btn">

        <li class="left_btn"> < </li>

        <li class="right_btn"> > </li>

    </ul>

</div>

</body>

</html>

　　

  • 固定定位（fixed）

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

<!DOCTYPE HTML>

<html lang="en-US">

  <head>

      <meta charset="utf8">

    <style>

        body{

            margin: 0;

        }

        .c1{

            width: 100%;

            height: 2000px;

            background-color: lightgray;

        }

        .c2{

            width: 200px;

            height: 60px;

            background-color: yellowgreen;

            text-align: center;

            line-height: 60px;

            position: fixed;

            right: 20px;

            bottom: 20px;

        }

    </style>

  </head>

  <body>

   <div class="c1"></div>

   <div class="c2">返回顶部</div>

  </body>

</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. 基于OT与CRDT协同算法的文档划词评论能力实现

    基于OT与CRDT协同算法的文档划词评论能力实现 当我们实现在线文档平台时,划词评论的功能是非常必要的,特别是在重文档管理流程的在线文档产品中,文档反馈是非常重要的一环,这样可以帮助文档维护者提高文档 ...

  2. 重学c#系列—— 简单编写一个guid [娱乐篇]

    前言 什么是guid? 全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的 ...

  3. 重新整理数据结构与算法(c#)—— 二叉树排序树补删除节点[二十二]

    前言 续前一章. 正文 删除节点规则: 1.假如删除的是叶子节点,让他的父节点,断开和它的联系. 2.如果删除节点右左子树或者右子树的话,那么应该这样. 如果删除节点是它的父节点的左节点,而删除节点有 ...

  4. 力扣619(MySQL)-只出现一次的最大数字（简单）

    题目: MyNumbers 表: 单一数字 是在 MyNumbers 表中只出现一次的数字. 请你编写一个 SQL 查询来报告最大的 单一数字 .如果不存在 单一数字 ,查询需报告 null . 查询 ...

  5. 力扣32(java)-最长有效括号（困难）

    题目: 给你一个只包含 '(' 和 ')' 的字符串,找出最长有效(格式正确且连续)括号子串的长度. 示例 1: 输入:s = "(()"输出:2解释:最长有效括号子串是 &quo ...

  6. C#的基于.net framework的Dll模块编程（二） - 编程手把手系列文章

    今天继续这个系列博文的编写.接上次的篇幅,这次介绍关于C#的Dll类库的创建的内容.因为是手把手系列,所以对于需要入门的朋友来说还是挺好的,下面开始咯: 一.新建Dll类库: 这里直接创建例子的Dll ...

  7. 浅谈DDD中的聚合

    简介: 在我看来并不是MVC的基础上增加领域层,使用充血模型,解耦基础服务,我的代码就符合DDD了. 作者 | 李宇飞(菜尊)来源 | 阿里开发者公众号 在我看来并不是MVC的基础上增加领域层,使用充 ...

  8. 实时计算pv/uv Demo

    简介: 本文由阿里巴巴高级技术专家邓小勇(静行)分享,主要用 Demo 演示如何通过实时计算 Flink 实时计算pv/uv的场景. 本文由阿里巴巴高级技术专家邓小勇(静行)分享,主要用 Demo 演 ...

  9. Serverless Kubernetes：理想，现实与未来

    简介: 当前 Serverless 容器的行业趋势如何?有哪些应用价值?如果 Kubernetes 天生长在云上,它的架构应该如何设计?Serverless 容器需要哪些基础设施?阿里云容器服务产品负 ...

  10. Java单元测试技巧之PowerMock

    简介: 高德的技术大佬向老师在谈论方法论时说到:"复杂的问题要简单化,简单的问题要深入化." 这句话让我感触颇深,这何尝不是一套编写代码的方法--把一个复杂逻辑拆分为许多简单逻辑, ...