首页 > 其他分享 >定位(position)

定位(position)

时间:2024-04-27 14:12:58浏览次数:17  
标签:定位 元素 50% 粘性 文档 position

定位

一个元素,只要position的取值不为static,认为该元素是一个定位元素
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:

  1. 文档中的元素摆放时,会忽略脱离了文档流的元素
  2. 文档流中计算自动高度时,会忽略脱离了文档流的元素

相对定位

不会脱离文档流,在原来位置进行偏移,盒子的偏移不会对其他盒子造成任何影响

绝对定位

  1. 宽度为auto,适应内容
  2. 包含块变化:找祖先中最近的定位元素,该元素的填充盒(padding盒)为其包含块。若找不到,则它的包含块为整个网页(初始包含块)

初始包含块(initial containing block)。对于浏览器而言,初始包含块的的大小等于视口 viewport 的大小,基点在画布的原点(视口左上角)。

固定定位

其他情况与绝对定位一致
包含块不同:固定为视口(浏览器的可视窗口)

粘性定位

粘性定位和相对定位的特点基本一致,不同的是:粘性定位可以在元素到达某个位置时将其固定。

  • 粘性项目:设置position:sticky的元素,并且有一个位置属性如top:0;
  • 粘性容器:自动定义了父元素为粘性容器,父元素具有overflow:hidden;粘性定位会失效

定位下的居中

.position-center {
    position: absolute;
    /* position: fixed;*/
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 500px;
    height: 500px;
}

.position-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%,-50%); // 相对于元素宽高
}

绝对定位和固定定位,margin为auto时,会自动吸收剩余空间

对各定位元素重叠时

堆叠上下文
设置z-index,只有定位元素设置有效
z-index为负数时,会被常规流,浮动元素覆盖

补充

  • 没有外边距合并
  • 绝对定位与固定定位会取消浮动,相对定位与粘性定位不会。

标签:定位,元素,50%,粘性,文档,position
From: https://www.cnblogs.com/zhanxinbing/p/16372960.html

相关文章

  • threejs 父元素 相对位置 position 网格对象
    设置position都是相对于父元素的位置设置的//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene'......
  • 多线程中frida定位关键线程的方法
    pthread_create会先得到一个pthread_internal_t结构体最后会调用__pthread_internal_add并将返回值赋给pthread_create的第一个参数thread_out__pthread_internal_add会将传入的pthread_internal_t加入到g_thread_list全局线程列表中,然后将传入的pthread_internal_t返回,也......
  • Vue项目报错,点击浏览器报错信息定位不到报错代码,该如何优雅地调试代码?
    一、背景通过vue-cli服务运行项目,项目运行一切正常。但打包后,通过nginx部署运行,大屏展示模块报echartstypeError错误。但是点击浏览器报错信息,定位到的位置代码根本看不懂。经过一番寻找,发现打包时,webpack配置产生源码的属性为false。这样就会导致,打包后代码经过压缩加密,出现报......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-39-highlight() 方法之追踪定位
    1.简介在之前的文章中宏哥讲解和分享了,为了看清自动化测试的步骤,通过JavaScript添加高亮颜色,就可以清楚的看到执行步骤了。在学习和实践Playwright的过程中,偶然发现了使用Playwright中的highlight()方法也突出显示Web元素。与之前的方法有异曲同工之妙。而且很简单。highlight()......
  • CSS之定位Position
    前言之前在《CSS之浮动》中,我当时是想一起说说定位的,因为我在很多地方看到有把float和position放在一起讲的,说它们的一些属性值可以使元素脱离文档流,但是没想到在准备内容的时候,发现浮动的内容有点多,就先把浮动的内容单独整了一篇。本文就继续来说说定位吧。基本信息Name:p......
  • 前端【小程序】14-小程序基础篇【地理位置】【腾讯定位服务】
    腾讯定位服务官网:https://lbs.qq.com位置服务(LBS)是基于用户的位置来提供服务的技术,通过要配合第三方的服务来实现,如腾讯地图、高德地图、百度地图等,享+项目采用的是腾讯的位置服务。申请使用腾讯位置服务需要按如下步骤操作:注册账号创建应用生成key小程序管理后......
  • C#定位IP地址归属地及运营商等
    一、通过NuGet安装IP2Region(支持Framework)如果是Net6则可以使用IP2Region.Net版本1、IP2Region使用方式:using(DbSearchersearch=newDbSearcher(CommonHelper.MapPath("/Resource/ip2region.db"))){IP2Region.Models.DataBlockipModel=search.MemorySear......
  • PostgreSql: ERROR: value too long for type character varying(1) 定位字段方法
    报错原因设置的数据库字段长度为1,但实际的值超过规定字段,导致报错。解决方案首先,需要定位字段是哪个字段出现的报错,但可惜的是,并没有报出具体是哪个字段在报错,所以只能通过检查Schema,查看哪些字段是长度为1的,然后再进行值的比较,才能锁定位置。ERROR:valuetoolongfortype......
  • 智能驾驶-感知-融合定位IMU
    时间GPS时间(GPST)是基于原子时(AT1)的时间系统,其秒长定义为铯原子(CS133)基态的两个超精细能级间跃迁辐射振荡9192631170周所持续的时间。GPS时间的起算点定义在1980年1月6日世界协调时(UTC)0时UTC时间UTC时间:UniversalTimeCoordinated,中文名称:世界标准时间或......
  • IfcDoorPanelPositionEnum
    IfcDoorPanelPositionEnum类型定义此枚举定义了描述门板在门内衬中的位置的基本方法。IFC2x中的新枚举图显示了在OperationType=DOUBLE_door_SINGLE_SWING的门样式中,PanelPosition=LEFT的门板和PanelPosition=RIGHT的门板的名称。从正Y轴的方向看,位置如局部放置的XZ平面所示。......