13 CSS 的position属性

就像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-US">

  <head>

        <meta charset="utf8">

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            .lunbo{

                width: 590px;

                height: 470px;

                border: 1px solid rebeccapurple;

                margin: 100px auto;

                position: relative;

            }

            .lunbo ul{

                list-style: none;

            }

            .lunbo .img li{

                position: absolute;

                top: 0;

                left: 0;

            }

            .lunbo .btn li{

                font-size: 25px;

                width: 40px;

                height: 40px;

                background-color: gray;

                text-align: center;

                line-height: 40px;

                border-bottom-right-radius: 50%;

                border-top-right-radius: 50%;

                color: white;

                position: absolute;

                top: 50%;

                margin-top: -20px;

            }

            .lunbo .left_btn{

                left: 0;

            }

            .lunbo .right_btn{

                right: 0;

            }

        </style>

  </head>

  <body>

  <div class="lunbo">

      <ul class="img">

          <li><a href=""><img src="imgs/1.jpg" alt=""></a></li>

          <li><a href=""><img src="imgs/2.jpg" alt=""></a></li>

          <li><a href=""><img src="imgs/3.jpg" alt=""></a></li>

          <li><a href=""><img src="imgs/4.jpg" alt=""></a></li>

          <li><a href=""><img src="imgs/5.jpg" alt=""></a></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>

13 CSS 的position属性的更多相关文章

  1. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  2. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  3. CSS中Position属性

    也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...

  4. CSS中Position属性static、absolute、fixed、relative

    在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示   CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...

  5. css中position属性(absolute|relative|static|fixed)概述及应用

    position属性的相关定义: static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流 fixed:对象脱离正常文档流 我们先来 ...

  6. 【转】CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  7. CSS中position属性( absolute | relative | static | fixed )详解

    我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循 ...

  8. 理解css之position属性

    之前css学的一直不精致而且没有细节,为了成为一个完美的前端工作人员,所以决定重新学习css的属性.当然会借鉴MDZ文档(MDZ文档)或其他博主的经验来总结.在这里会注明借鉴或引用文章的出处.侵权即删 ...

  9. CSS中position属性 （absolute，relative，static，fixed）

    只要position的属性值设置的不是默认的值则定位的元素都将脱离文档流 1.static是position的默认的值,按照正常的文档流进行排版,设置了该属性值得元素的top,left属性均不起作用. ...

  10. css 中 position属性

    position属性详解 文档流 1.html中的布局方式分为三种: 标准流(顺序布局):因为html中的元素大体可以分为两大类(a:块级元素:div .H1-H6. table表格  有序级无序列表 ...

随机推荐

  1. 【webserver 前置知识 03】Linux网络编程入门其二，I/O多路复用

    I/O多路复用 I/O多路复用使得程序能够同时监听多个文件描述符 LInux下实现I/O多路复用的系统调用主要由select.poll以及epoll(常问,要会自己写出来) 例子 阻塞等待 阻塞等待可 ...

  2. 【LeetCode贪心#04】跳跃游戏I + II

    跳跃游戏 力扣题目链接(opens new window) 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示 ...

  3. 在矩池云使用ChatGLM-6B & ChatGLM2-6B

    ChatGLM-6B 和 ChatGLM2-6B都是基于 General Language Model (GLM) 架构的对话语言模型,是清华大学 KEG 实验室和智谱 AI 公司于 2023 年共同 ...

  4. WPF性能优化：性能分析工具

    在硬件性能不断提升的现在,软件性能依旧是开发人员关注的重点.不同类型的程序关注的具体性能指标有所不同,服务器程序注重吞吐量,游戏引擎追求渲染效率,桌面程序则关注内存消耗以及界面加载效率和流畅性.当我们 ...

  5. 【Azure Redis 缓存】应用中出现连接Redis服务错误(production.ERROR: Connection refused)的排查步骤

    问题描述 在PHP应用中,连接Redis的方法报错  RedisException(code: 0): Connection refused at /data/Redis/Connectors/Php ...

  6. 【Azure Redis 缓存】Lettuce 连接到Azure Redis服务，出现15分钟Timeout问题

    问题描述 在Java应用中,使用 Lettuce 作为客户端SDK与Azure Redis 服务连接,当遇见连接断开后,长达15分钟才会重连.导致应用在长达15分的时间,持续报错Timeout 问题解 ...

  7. C#多线程(7)：手动线程通知

    目录 区别与示例 ManualResetEvent 类 ManualResetEventSlim 区别与示例 AutoResetEvent 和 ManualResetEvent 十分相似.两者之间的区 ...

  8. Prometheus技术分享——prometheus的函数与计算公式详解

    Prometheus与zabbix相比,它的强大之处就在于可以它可以使用的很多计算公式去获取自己需要的数据.当然,这里所涉及到的计算公式,也是我们普遍认为的难点所在.比如,我们要获取CPU使用率,使用 ...

  9. tapable - webpack 的 hooks - getAc - 异步流程控制

    tapable - webpack 的 hooks,类似自己的 getAc 官方地址 https://www.npmjs.com/package/tapable 随便找了篇文章:聊聊 Webpack ...

  10. Pod中断预算 PodDisruptionBudget（PDB）

    PodDisruptionBudget(PDB)是Kubernetes中的一个资源对象,用于确保在进行维护.升级或其他操作时,系统中的Pod不会被意外中断或终止.PDB提供了一种机制,通过限制在给定时 ...