首页 > 其他分享 >21 绝对定位,固定定位

21 绝对定位,固定定位

时间:2023-09-20 11:35:12浏览次数:40  
标签:定位 21 dashed 固定 type position 2px border

position: relative
position: absolute;
posion: fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      height: 1000px;
    }
    div:nth-of-type(1){ /* 相对定位*/
      border: #a2148f 2px dashed;
      position: relative;
      left: 50px;
    }
    /* 绝对定位:
    1.相对浏览器
    2.父级元素标签定位后就相对父级标签
    */
    div:nth-of-type(2){  
      border: #a2148f 2px dashed;
      position: absolute;
      left: 100px;
    }
    div:nth-of-type(3){/* 固定定位:导航栏,广告什么的 */
      border: #a2148f 2px dashed;
      position: fixed;
      right: 50px;
    }
  </style>
</head>
<body>
<div>
  <div>d1</div>
  <div>d2</div>
  <br>
  <div>d3</div>
</div>
</body>
</html>

标签:定位,21,dashed,固定,type,position,2px,border
From: https://www.cnblogs.com/zhanjianhai/p/17716886.html

相关文章

  • 别再纠结线程池池大小、线程数量了,哪有什么固定公式 | 京东云技术团队
    可能很多人都看到过一个线程数设置的理论:CPU密集型的程序-核心数+1I/O密集型的程序-核心数*2不会吧,不会吧,真的有人按照这个理论规划线程数?线程数和CPU利用率的小测试抛开一些操作系统,计算机原理不谈,说一个基本的理论(不用纠结是否严谨,只为好理解):一个CPU核心,单位时间内只能......
  • 19 相对定位
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>相对定位</title><style>#box{height:300px;width:300px;padding:20......
  • 20 相对定位练习
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>相对定位</title><style>#box{height:300px;width:300px;padding:20......
  • vmware虚拟机中的centos设置固定ip
    1、使用桥接模式,确保虚拟机目前可联网因为我们要使用目前的配置,使得目前ip为固定ip,确保ip无冲突 2、查看目前ip配置ipaddrshow #查看ip,找到虚拟机目前联网的网络接口,我的是ens33ipaddrshowens33 #查看,确定inet172.16.200.102/20  ip和子网掩码iproute......
  • Java 21 新特性:switch的模式匹配
    在之前的Java17新特性中,我们介绍过关于JEP406:switch的模式匹配,但当时还只是关于此内容的首个预览版本。之后在JDK18、JDK19、JDK20中又都进行了更新和完善。如今,在JDK21中,该特性得到了最终确定!下面,我们就再正式学习一下该功能!在以往的switch语句中,对于case中的类型匹配限......
  • 固定交付项目适用敏捷开发方式吗?
    假设一个固定交付的项目,这个开发项目是构建一个应用程序,时间表是一年。在项目进行期间可能出现什么问题? 一、什么是固定交付?一个固定交付的项目意味着它具有固定的范围、固定的时间表和固定的成本。长期以来,传统的项目管理方式侧重于由项目范围、预算和时间表组成的“三重约......
  • 21_消息队列
    消息队列消息队列1、任务级队列处理函数2、中断级队列处理函数(带中断保护)已经在CMSIS接口中封装但写入生产速度比消费速度快的时候,容易出现数据被覆盖邮箱队列创建、发送、接收、查询、删除传数值osEventevent=osMessageGet(myQueue01Handle,osWaitForever);......
  • graalvm jdk 21 版本发布
    graalvm效率还是挺快的,java21版本虚拟线程以及ga可,graalvm对于21版本支持的发布,让我们也可以直接使用了从官方介绍以及解决来看,性能提升是很大的,在一些测试场景中nativeimage比C2jit还快说明目前官方已经提供了21的下载包可以体验使用参考资料https://www.graalvm.......
  • 天合光能分布式组件如何?210至尊N型组件创领光伏7.0时代
    在能源转型、建设新型能源体系的当下,“光伏+”成为“十四五”规划的重点,正在加速赋能千行百业、走进千家万户,即将迎来蓬勃发展的新时代。在此背景下,8月30日,能源发展网和中国改革报《能源发展》周刊联合国家级能源智库,在北京举办第六届光伏+创新发展论坛,邀请专家、学者、企业家......
  • 天合光能210组件累计出货量超75GW,光储融合引领智慧能源升级
    8月29日晚间,天合光能披露2023年半年度报告(下简称“报告”),今年上半年,天合光能组件出货27GW;截至同期,天合光能组件累计出货超150GW,其中210组件累计出货量超75GW。210+N型技术、产品领先布局、产能全面上扬。此外,支架业务出货3.3GW,分布式系统业务出货4.5GW,储能出货同比增加超过200%......