css中的相对定位、绝对定位、固定定位

相对定位

position:relative
1. 相对定位是相对于元素在文档流中原来位置进行定位
2. 当开启了相对定位，不设置偏移量，元素不会发生任何变化
3. 相对定位不会脱离文档流（）
4. 相对定位会使元素提升一个层级（上一层显示）
5. 相对定位不会改变元素的性质，块还是块，内联还是内联

解释4：使元素提升一个层级=》：

绝对定位

position:absolute
1. 绝对定位是相对于元素离它最近的开启了定位的祖先元素进行定位
  （一般情况，开启了子元素的absolute，同时会开启父元素的relative）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。
2. 开启绝对定位后，不设置偏移量，元素位置不会发生变化
3. 绝对定位会使元素脱离文档流(fixed,float一样效果)
4. 绝对定位会使元素提升一个层级
5. 绝对定位会改变元素性质（内联 ==> 块元素，块元素的宽高默认都会被内容撑开）
解释3：绝对定位会使元素脱离文档流=》：

解释4：使元素提升一个层级=》：
解释5：改变元素性质=》
span在设置为absolute之后，可以设置高宽，也就是说，span变为了块元素

固定定位

position:fixed
1. 固定定位也是一种绝对定位，大部分特点与绝对定位一样
2. 不同的是：
  ·固定定位永远相对于浏览器窗口进行定位
  ·固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动
  （IE6不支持固定定位）

<div class="box1"></div>
<div class="box2"><div class="box3"></div>
</div>
<div class="box4"></div>

解释1==》

css中的相对定位、绝对定位、固定定位相关推荐

相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
绝对定位,相对定位,固定定位和粘性定位的特性及区别,我整理一下放在文章最下面了,不用死记硬背,理解一下就ok,需要的话可以看看. 当导航栏头部没有别的模块时,想要滑动过程中导航栏一直在顶部,有两种写法 ...
绝对定位、相对定位、固定定位特点
一.定位 1.定位的定义某个元素可以自由地在盒子上面移动,并且可以压着其他元素当滚动窗口时,某个元素可以固定在页面上可以让盒子自由的在某个盒子上进行移动并且可以压住其他盒子,或者可以在屏幕上固定 ...
CSS 中，为什么绝对定位（absolute）的父级元素必须是相对定位（relative）？
问题: CSS 中,为什么绝对定位(absolute)的父级元素必须是相对定位(relative)? 搞清楚了,正确的应该是只要父级元素=设置了position值(absolute或者relative ...
定位的坐标原点HTML,css固定定位_CSS绝对定位固定定位详解
摘要腾兴网为您分享:CSS绝对定位固定定位详解,智学网,鱼乐贝贝,优酷,瑞易生活等软件知识,以及安卓微信多开,特效视频,微贷网app,勿忘我3dm,有为学堂,火力牛,手机知网,移动小秘书,快学堂,p ...
css中的三种基本定位机制
css中的三种基本定位机制 a.普通文档流 b.定位:相对定位绝对定位固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...
【前端】CSS中的相对定位，绝对定位和固定定位
相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置. 相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: position默认值为stat ...

css中的相对定位、绝对定位、固定定位

相对定位

绝对定位

固定定位

css中的相对定位、绝对定位、固定定位相关推荐

最新文章

热门文章