首页 > 其他分享 >CSS(样式-定位) 笔记 06

CSS(样式-定位) 笔记 06

时间:2024-08-28 17:51:51浏览次数:16  
标签:滚动 top 100px 笔记 position 06 浏览器 CSS absolute

position: ;定位

1.static 代表静态模式,常态模式

2.fixed  代表固定模式

特点:不随浏览器的滚动而滚动,释放掉自己原来的空间,参照物是整个浏览器

3.absolute 代表绝对模式

特点:随浏览器的滚动而滚动,释放掉自己原来的空间,参照物是整个浏览器

4.relative 代表相对位置

特点:随浏览器的滚动而滚动,保留自己原来的空间,参考物是自己之前的位置

5.结合模式:父级元素使用relative,子元素使用absolute

特点:子元素随浏览器的滚动而滚动,释放掉自己的空间,参考物是父级

6.与定位配套的方位属性left,right,top,bottom,但定位的取值必须是fixed,absolute,relative中的一项

7.与定位配套的层次属性z-index,调整,值越小越靠下,值越大,越靠上


.container{
    width:600px;
    height:1000px;
    background:#81ecec;
    position: relative;
    /* 父级添加此标签 */
}

.top{
    width:100px;
    height:100px;
    background:#482f82;
    position: absolute;
    /* 子元素,参照物是父级 */
    top:200px;
    left:100px;
}

.middle{
    width:300px;
    height:100px;
    background:#9b185a;
    position: absolute;
    top:200px;
    left:100px;
}

.bottom{
    width:100px;
    height:300px;
    background:#a29bef;
    position: absolute;
    top:200px;
    left:200px;
}

标签:滚动,top,100px,笔记,position,06,浏览器,CSS,absolute
From: https://blog.csdn.net/m0_74977981/article/details/141571787

相关文章

  • 四边形不等式学习笔记
    1.定义1.1四边形不等式四边形不等式指的是二元函数\(w(l,r)\)对于\(l_1\lel_2\ler_1\ler_2\)满足:\[w(l_1,r_1)+w(l_2,r_2)\lew(l_2,r_1)+w(l_1,r_1)\]也就是交叉优于包含。四边形不等式的等价形式是:\[w(l,r-1)+w(l+1,r)\lew(l,r)+w(l+1......
  • Netty 学习笔记
    Java网络编程早期的JavaAPI只支持由本地系统套接字库提供的所谓的阻塞函数,下面的代码展示了一个使用传统JavaAPI的服务器代码的普通示例//创建一个ServerSocket用以监听指定端口上的连接请求ServerSocketserverSocket=newServerSocket(5000);//对accept方法......
  • 智谱开源 CogVideoX-5B 视频生成模型,RTX 3060 显卡可运行;曝 OpenAI 模型「草莓」今秋
       开发者朋友们大家好: 这里是「RTE开发者日报」,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享RTE(Real-TimeEngagement)领域内「有话题的新闻」、「有态度的观点」、「有意思的数据」、「有思考的文章」、「有看点的会议」,但内容仅代表编......
  • Java基础-学习笔记15
    15泛型1.泛型泛型的好处编译时,检查添加元素的类型,提高了安全性减少了类型转换的次数,提高效率比如:ArrayListarr=newArrayList();在放入时,如果添加Dog类到arr里,编译器发现添加的类型不满足要求,就会报错;在取出时,直接取出Person类,就不用再转型使用。泛型的......
  • MybatisPlus学习笔记
    MyBatisPlus从入门到精通1.概述MybatisPlus是一款Mybatis增强工具,用于简化开发,提高效率。它在MyBatis的基础上只做增强不做改变,为简化开发、提高效率而生。官网:https://baomidou.com/2.快速入门2.0准备工作①准备数据CREATETABLE`user`(`id`bigint(20)NOTNULL......
  • html+css编写三级菜单
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</title&g......
  • html+css编写二级菜单
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Document</title&g......
  • CSS3实现购物车动画效果
    概述小程序商城或者web端网站时,我们可以只通过CSS的animation和transform,而不需要借助额外的第三方库轻松实现简单的动画效果,丰富页面的表达效果效果如下图所示,点击按钮就会有个商品进入左下角的购物车内购物车动画示例地址代码示例元素开始只需要写按钮和购......
  • 系统架构师考试学习笔记第二篇——架构设计专业知识(6)系统工程基础知识
    本章节考点分析:        第6课时主要学习系统工程和系统性能等内容。根据考试大纲,本课时知识点会涉及单项选择题,约占2~5分。本课时内容侧重于概念知识也会有计算题。根据以往全国计算机技术与软件专业技术资格(水平)考试的出题规律,考查的知识点多来源于教材,扩展内容较......
  • Spring超硬核笔记———全是干货
    为什么用spring?Spring的核心功能IOC(控制反转,依赖注入),AOP(面向切面的编程)IOC:我们在使用过程中不用关注于对象是怎么创建的,只用应用过去,sping自动帮我们完成注入,对象的创建,spring默认创建对象是单例,这样减少了频繁创建对象,让对象重复利用,所有的对象都是放在BeanFactory工厂......