头图

CSS定位

CSS定位是用来控制元素在页面上的位置和排列方式的技术。CSS有三种基本的定位机制:普通流、浮动流、定位流,其中定位流包括相对定位、绝对定位和固定定位。以下是CSS定位的总结:

  • 普通流:元素默认从上至下或者从左至右的排列顺序。
  • 浮动流:添加了浮动的元素。
  • 定位流:添加了定位的元素,包括相对定位、绝对定位和固定定位。

定位机制的区别:

  • 相对定位:以元素原来的位置为基准,根据设置的偏移量进行定位,元素仍然处在文档流中,元素的宽高不变,设置偏移量也不会影响其他元素的位置。
  • 绝对定位:以离元素最近的设置了绝对或相对定位的父元素为基准,如果没有父元素设置绝对或相对定位,则元素相对于根元素即html元素定位,元素脱离了文档流,元素在没有设置宽度的情况下,宽度由元素里面的内容决定。
  • 固定定位:以浏览器窗口为基准,固定在屏幕上的某个位置,不随页面滚动而滚动。

定位的属性:

  • position:用于设置元素的定位方式,其属性值包括static、relative、absolute和fixed。
  • top、right、bottom、left:用于设置元素相对于其定位父元素的偏移量。
  • z-index:用于设置元素的层级,层级高的元素会覆盖在层级低的元素之上。

实现绝对定位盒子的水平垂直居中可以通过以下方式实现:

.box {    
    position: absolute;    
    left: 50%;    
    margin-left: -100px;    
    top: 50%;    
    margin-top: -100px;    
    width: 200px;    
    height: 200px;    
    background-color: red;
}

定位的使用场景:

  • 相对定位:用于微调元素的位置,使其相对于原来的位置移动一定的距离,但不影响其他元素的位置。
  • 绝对定位:用于将元素定位在其父元素的某个位置,可以实现元素的居中、遮罩等效果。
  • 固定定位:用于将元素固定在屏幕的某个位置,不随页面滚动而滚动,常用于实现导航栏、返回顶部等功能。

层级问题是CSS定位中需要注意的问题,其规则如下:

  • 标准流盒子低于浮动的盒子,浮动的盒子又低于定位的盒子。
  • 定位高于浮动,浮动高于标准流。
  • 用法:必须有定位(除去static之外),给定z-index的值为层级的值(不给默认为0)。
  • 层级为0的盒子,也比标准流和浮动高。
  • 层级为负数的盒子,比标准流和浮动低。
  • 层级不取小数。
  • 层级一样,后面的盒子比前面的层级高。
  • 浮动或者标准流的盒子,后面的盒子比前面的层级高。
  • absolute是不占位置的,relative是占位的。而层级的高低,是和占不占位置没有关系的。
1 声望
0 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.7k评论 5

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.1k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan22阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

1 声望
0 粉丝
宣传栏