css定位(相对定位和绝对定位)
css定位(相对定位和绝对定位)
前言
随着前端课程的学习,我们从浮动来到了定位,同样都是布局所需要用到的方法,那么有什么区别呢?设置定位又有什么要求呢?设置定位又能对我们写前端样式有什么帮助呢?我整理了部分笔记,一起来看看吧!
一、定位是什么?又有哪些形式?
定位: 是一种高级的布局手段, 你可以将任何元素,摆放在页面的任意位置;
定位又分为 :相对定位和绝对定位
二、如何开启定位
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)
注意:一般情况下,为了更好的控制子元素的位置,我们会在开启子元素的绝对定位后,会同步开启父元素的相对定位 这叫"子绝父相"。
总结
以上就是今天要讲的内容,本文仅仅简单介绍了定位,怎么熟练运用定位,还有在什么地方用定位会比浮动方便呢,这些还需要我再学习学习,今天的分享就到这里啦,期待我们在明天的分享中相遇呀,最后,祝各位生活愉快,再见!
更多推荐
所有评论(0)