前言

随着前端课程的学习，我们从浮动来到了定位，同样都是布局所需要用到的方法，那么有什么区别呢？设置定位又有什么要求呢？设置定位又能对我们写前端样式有什么帮助呢？我整理了部分笔记，一起来看看吧！

一、定位是什么？又有哪些形式？

定位：是一种高级的布局手段，你可以将任何元素，摆放在页面的任意位置；

定位又分为：相对定位和绝对定位

二、如何开启定位

1.相对定位

可以用position来设置定位

可选值： static 默认值，不开启定位

relative 相对定位

absolute 绝对定位

fix 固定定位

sticky 粘滞定位

特点：position：relative 开启了相对定位

1、如果不设置偏移量，元素的位置是不发生任何变化

2、设置偏移量，偏移量的相对位置是相对于元素原来在文档流中的位置（left：0；top：0）

3、设置相对定位后，元素的性质是不发··生变化

4、设置相对定位后，元素的层级会提高

5、设置相对定位后，元素是不会脱离文档流

2.绝对定位

开启绝对定位 position: absolute;

绝对定位后的特点

1、设置绝对定位后，元素会脱离文档流

2、设置绝对定位后，元素的性质就会发生变化，就不会再区分块还是行内了

3、设置绝对定位后，如果不设置偏移量，元素的位置也不会发生变化

4、绝对定位，它的原点是相对于其包含块来定位的

5、设置绝对定位后，元素的层级也会提高

包含块

1、默认情况（没有定位的情况下），包含块就是元素的祖先元素

2、如果是定位的情况下，包含块就是元素的开启了定位的，离它最近的祖先元素

如果祖先元素都没有开启定位，则包含块就是根标签（html）

注意：一般情况下，为了更好的控制子元素的位置，我们会在开启子元素的绝对定位后，会同步开启父元素的相对定位这叫"子绝父相"。

总结

以上就是今天要讲的内容，本文仅仅简单介绍了定位，怎么熟练运用定位，还有在什么地方用定位会比浮动方便呢，这些还需要我再学习学习，今天的分享就到这里啦，期待我们在明天的分享中相遇呀，最后，祝各位生活愉快，再见！

css定位（相对定位和绝对定位）相关推荐

详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位一.Static 静态定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,这个时候你给这个元素设置的left,r ...
css中相对定位和绝对定位
css中相对定位和绝对定位定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现 ...
html相对定位不占位置,CSS position 相对定位和绝对定位
一.position 的四个值:static.relative.absolute.fixed. 绝对定位:absolute 和 fixed 统称为绝对定位相对定位:relative 默认值:stat ...
【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
css的相对定位和绝对定位
css标签的相对定位和绝对定位是通过position属性来控制的,相对定位和绝对定位不改变元素的大小形状,只改变元素的位置. 一.position属性的值有以下几种: static:默认值,没有定位, ...
CSS中相对定位与绝对定位
绝对定位: absolute, fixed 相对定位: relative 默认值: static <!DOCTYPE html> <html><head><m ...
html中的相对和绝对定位,实例讲解CSS中相对定位和绝对定位的用法和区别
一.相对定位相对定位是指,该元素相对自己原来位置,偏移一定距离,元素可以通过顶部top,底部bottom,左侧left和右侧right属性来设置定位.它相对的是它自己. 举例:大div里面包含5个小 ...
html css x y相对定位坐标,HTML与CSS之相对定位、绝对定位
相对定位指元素在其正常的位置偏移某些像素即相对于元素本身的原有位置html 我是C1 我是C2 css #C0{ border: 1px solid red; width: 400px; heigh ...
CSS相对定位和绝对定位的区别
CSS中相对定位和绝对定位常常会使初入的新人感到困惑,我本人也是深受其害!今天详细的给大家说一下相对定位和绝对定位的区别,也是对自己的一种复习. 一.相对定位 position: relative; ...
html背景图片垂直居中,css — 定位、背景图、水平垂直居中
css - 定位.背景图.水平垂直居中目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; s ...

css定位（相对定位和绝对定位）

文章目录

前言

一、定位是什么？又有哪些形式？

二、如何开启定位

1.相对定位

总结

css定位（相对定位和绝对定位）相关推荐

最新文章

热门文章