干货 | CSS中的四种定位有什么区别?

九路 等级 706 0 0

干货 | CSS中的四种定位有什么区别?

我们都知道,前端开发里面的CSS中常用的定位方式有

普通定位,相对定位,绝对定位、固定定位定位这四种。

但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和区别,在使用的时候都很不灵活,要知道,想做好网页布局,这4个定位方式都是精髓呀,学好定位布局,前端开发轻轻松松!

那么今天我们就来讲解一下CSS中这4种定位的作用和区别!帮助大家搞清楚这4种布局的妙用!

一、普通定位(Static)

在我们的开发过程中,除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。

二 . 相对定位(relative)

在我们前端开发中,relative相对定位一直被看作普通文档流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

干货 | CSS中的四种定位有什么区别?

结果

干货 | CSS中的四种定位有什么区别?

三 . 绝对定位(absolute)

在前端开发中,相对于已定位的最近的父类元素,如果没有已定位的最近的父类元素,那么它的位置就相对于最初的包含块(如body)。绝对定位的框可以从它的包含块向上、右、下、左移动。

干货 | CSS中的四种定位有什么区别?

结果

干货 | CSS中的四种定位有什么区别?

四 .固定定位(fixed)

相对于浏览器窗口,其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素,绝对定位是固定在页面的,如果滚动滚动条的话绝对定位的元素也会滚上去,fixed元素不会。

最后

这几种定位方式各有千秋,很多小白就经常问老李了,我们写页面的时候,这4种布局方式应该用哪个呢?(这问题一听就很小白了)

最后给大家说一下吧,在我们现在专业的前端开发工作中,用的最多的不是绝对定位,也不是相对定位,而是绝对定位和相对定位的结合使用。(小白:WTF????合体???)

并不是合体出现什么新的定位方法啦。而是我们去前端开发中的一种布局书写规范:

父相子绝(即父元素使用相对定位,子元素使用绝对定位,一起结合实现布局。)

这种布局规范是现阶段前端开发公认的布局方法,也能避免很多错误的出现。如果你还不知道怎么使用“父相子绝”,那就快关注我吧!跟着老李从小白变成前端大神!

收藏
评论区

相关推荐

《css大法》之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形。 预备知识 伪元素 伪元素是一个附
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
小白怎么成为一个黑客?按照这个路线来!
大家好,我是周杰伦。接下来我会写系列的文章,给大家整理下网络安全的详细的学习步骤和学习资源推荐。今天的主题是——Web安全。Web安全是网络渗透中很重要的一个组成部分,今天跟大家聊一下,如何在三个月内从零基础掌握Web安全。 第一个月第一周:HTML+CSS,学会网页基本格式,学会编写基本网页,表单,学会用浏览器F12检查元素,查看源码 推荐学习地址: H
CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float([CSS浮动属性Float详解](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fparan.io%2Fcss-float-attribute%2F)),另一个就是CSS定位属性Position。 1\. position:static ---
23、Django实战第23天:视频播放页面
打开素材course-play.html,会发现播放页面处了包含播放器,其他和“章节”页面一样。 1、把course-play.html复制到template目录下 2、把下面两段代码拷贝出来 <link rel="stylesheet" type="text/css" href="../css/video-js.min.css">
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
Array.prototype.slice.call()的理解
最近在看廖雪峰的JS课程,浏览器中的操作DOM的那一章,有这样一道题。 * JavaScript * Swift * HTML * ANSI C * CSS * DirectX <!-- HTML结构 --> <ul id="test-list"> <li>JavaScript</li>
DIV+CSS+JS实现的文字色彩渐变
如题,这是一个简单的 [CSS](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.libertystudio.net%2Ftag%2Fcss) + DIV + [JavaScript](https://www.oschina.net/action/GoToLink?url=http%3
JavaScript template engine in just 20 lines
I'm still working on my JavaScript based preprocessor - [AbsurdJS](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fkrasimirtsonev.com%2Fblog%2Farticle%2FAbsurdJS-fundament
JavaScript的入门简介
#### 什么是 JavaScript JavaScript,我们一般简称为 JS,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。 JavaScript 现在已经被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并支持面向对象、命令式和声明式风格。 HTML、CSS、JavaScript三者不同的功能:
JavaScript的前世今生
[JavaScript的前世今生](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwww.cnblogs.com%2Fdongtianee%2Fp%2F4492665.html) ========================================================
Javascript基础知识学习(三)
**前言:** javascript是一种轻量的、动态的脚本语言,我们为什么要使用javascript ?对于一个网页的设计,.html用来放置网页的内容,.css则用来设计网页的样式和布局,那么.js它主要是使网页能够产生交互,意思就是能够通过代码动态的修改HTML、操作CSS、响应事件、获取用户计算机的相关信息等。javascript不是所有的浏览器
MiniUi遇到的一个Bug或者说坑,以div里面的内容自适应高度
页面源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="css/demo.css" rel="stylesheet" type="tex