`

关于相对定位,绝对定位小记

    博客分类:
  • css
 
阅读更多
对相对定位,绝对定位一直以来有点小小的偏差,总结一下

相对定位:
相对于元素原来位置进行定位,使用top,left属性之后他在原来位置上进行移动,原来元素的位置还是保留着,其他元素也只能看到他原来的位置。

<div style="padding:20px 20px;border:1px solid red;position:relative;">
     <div style="border:1px solid blue;position:relative;top:10px;">ss</div>
     <div style="height:50px;border:1px solid gray;">sss</div>
</div>




绝对定位:
如果只设置了元素的position为absolute则元素还是在原来位置上,但宽度和高度变为适应元素内容的宽度高度(元素默认没有设置高度宽度的情况下),一旦设置left或top,绝对定位才会相对于已定位的父级或以上元素的原点进行定位。

<div style="border:1px solid red;margin:20px 20px;padding:20px 20px;">
     <div style="height:20px;border:1px solid blue">ss</div>
     <div style="height:30px;width:60px;border:1px solid;yellow;position:absolute;">yellow</div>
     <div style="border:1px solid green;">ssssssssssssssssssss</div>
</div>




设置了left和top之后
  • 大小: 16.6 KB
  • 大小: 11.9 KB
  • 大小: 11 KB
分享到:
评论

相关推荐

    android 的相对布局的使用小记

    在Android开发中,布局设计是应用界面的重要组成部分,其中相对布局(RelativeLayout)是最常用的一种布局方式。相对布局允许我们根据各个视图(View)之间的相对位置来安排它们,提供了更灵活的界面设计方式。本篇...

    android开发小记

    在“android开发小记”这个主题中,我们可以深入探讨Android应用程序开发的相关知识,特别是通过查看提供的压缩文件中的代码示例。这些文件名如lesson_8_code.zip至lesson_20_codel.zip,以及不同的Mp3Player版本,...

    C++编程小记,经典收藏

    ### C++11 新特性详解 #### 一、Auto 关键字的新用途 - **旧用途**:在C++11之前,`auto`关键字主要用于指定变量的存储期。 - **新用途**:C++11引入了类型推断的概念,`auto`变成了一个类型占位符,用于告诉...

    随笔小记.doc

    随笔小记.doc

    【咬人草小记,阅读附答案】 咬人草小记阅读答案.docx

    这篇文章《咬人草小记》便是对这种植物的描述,以及作者与它亲密接触后的体验与思考。 文章的开始,是一段友人的警告:“这草,你可不能碰!”正是这句话,将作者的注意力引向了这种奇特的生物。咬人草的外表并...

    垂直居中 小记

    设置父元素相对定位,子元素绝对定位,然后通过调整`top`和`margin`实现。 ```css .parent { position: relative; height: 100px; } .child { position: absolute; top: 50%; transform: translateY(-50%); ...

    GeoStudio学习小记.pdf

    GeoStudio学习小记

    Linux boost库安装、编译问题小记

    环境: Linux s12084 2.6.9-67.ELsmp #1 SMP Wed ...小记一下。以备以后参考。  boost 库做得真好。在windows 平台, linux 平台下编译都很顺利。hp aCC 也宣称对 boost 1.35 完全支持 。  全部编译是很痛苦的过程

    java小记.rar

    这些组件提供了服务定位、消息传递和分布式计算的能力。笔记中可能包含了使用这些组件的实例和注意事项。 容器如Tomcat、Jetty或WebLogic是运行Java Web应用的基础。作者可能讨论了如何部署应用到这些容器,解决...

    关于发展学生空间观念的主题教研活动小记.pptx

    关于发展学生空间观念的主题教研活动小记.pptx

    fox999_国内工作流产品分析小记.pdf

    - **市场概况**:文中提到,虽然国内从事OA(办公自动化)和平台建设的公司众多,但在工作流领域深耕细作的厂商相对较少。 - **专注性问题**:作者指出,许多公司虽拥有优秀的产品或平台,但在工作流这一细分领域并...

    刘重威将军小记.docx

    刘重威将军小记.docx

    python进行爬虫小记

    Selenium提供了多种定位网页元素的方法,如`find_element_by_xpath()`和`find_element_by_css_selector()`,以及获取元素属性和文本内容的方法。 在实际爬虫过程中,我们还需要注意一些常见问题,比如处理...

    sql loader用法小记

    这篇“sql loader用法小记”可能是博主对SQL Loader使用经验的总结和分享,虽然描述中没有具体信息,但从标签“源码”和“工具”可以推断,内容可能涉及到SQL Loader的基本操作、配置文件以及可能遇到的问题。...

    随笔小记文档及若干代码

    随笔小记的文档,自己记录的一些文档,仅供参考

    每日小记,记录账单和日记

    "每日小记"就是这样一款应用,它结合了记账和日记的功能,为用户提供了一个全面的生活记录平台。 首先,我们要了解记账的重要性。在个人财务管理中,记账是一个基础但至关重要的步骤。通过"每日小记",用户可以轻松...

    当代班主任工作小记.doc

    当代班主任工作小记.doc

    小学语文圣诞节作文圣诞小记

    小学语文圣诞节作文圣诞小记

    海居小记_csdn

    描述“海居小记”并未给出详细信息,因此我们无法从这个描述中得出更多关于文章内容的知识点。 从标签“课件”来看,这部分内容有可能是一份教育性质的材料,比如可能用于教学的文档或演示文稿的一部分。但由于内容...

    Sublime Text3 安装到使用个人小记

    Sublime Text3 安装到使用个人小记

Global site tag (gtag.js) - Google Analytics