相对定位relative、绝对定位absolute、固定定位fixed

注：默认情况下的定位是 postion：static；

使用定位时，常常使用偏移量对位置进行描述：left、right、top、bottom

定位时，使用z-indent可以元素的堆叠顺序，例：z-indent：1，出现在上层（z-index 仅能在定位元素上奏效）

相对定位relative

相对定位的参考物是元素的初使位置

相对定位的特点：

不影响元素本身的特性
元素不脱离文档流
相对于原位置进行偏移

        div{width: 100px;height: 100px;margin: 10px;font-size: 40px;text-align: center;line-height: 100px;background-color: orange;}div:nth-of-type(2){position: relative;left: 100px;}

        <div>1</div><div>2</div><div>3</div>

绝对定位absolute

绝对定位的参考物是：距离最近的使用了定位的父级，父级都没有使用时找body

绝对定位的特点：

元素脱离文档流
行元素支持所有的css样式
块元素由内容撑开宽高
清除子级浮动

        div{width: 100px;height: 100px;margin-bottom: 10px;font-size: 40px;text-align: center;line-height: 100px;background-color: orange;}div:nth-of-type(2){position: absolute;left: 100px;}

        <div>1</div><div>2</div><div>3</div>

        .one{background-color: orange;width: 300px;height: 300px;position: relative;}.two{background-color: greenyellow;width: 200px;height: 200px;position: absolute;top: 50px;left: 50px;}.three{background-color: skyblue;width: 100px;height: 100px;position: absolute;top: 50px;left: 50px;}

        <div class="one"><div class="two"><div class="three"></div></div></div>

使用定位实现万能居中：

        .background{width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, .7);}.background div{width: 300px;height: 200px;background-color: #fff;/* 以下代码实现万能居中 */position: absolute;left: 50%;top: 50%;margin-left: -150px;margin-top: -100px;}

        <div class="background"><div>万能居中公式：<br>position: absolute;<br>left: 50%;<br>top: 50%;<br>margin-left: -width/2;<br>margin-top: -height/2;<br></div></div>

固定定位fixed

参考物：浏览器窗口

固定定位的特点：

脱离文档流
清除子级浮动

固定定位的实现可以使页面中的某个元素不随浏览器的滚动而消失，例如导航栏的固定实现

相对定位relative、绝对定位absolute、固定定位fixed相关推荐

[css] 说说你对相对定位、绝对定位、固定定位的理解
[css] 说说你对相对定位.绝对定位.固定定位的理解 position 属性指定了元素的定位类型.position 属性的五个值:static(默认值) relative(相对定位) fixed(固 ...
html固定按钮相对位置,CSS基础之相对定位，绝对定位，固定定位，z-index
1.相对定位 1.1.相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整.也就是说,如果一个盒子想进行位置调整,那么就要使用相对定位 a position:relative; → 必 ...
WEB学习 -相对定位、绝对定位、固定定位、z-index
相对定位相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置调整. 2.不脱标,老家留坑,形影分离也就是说相对定位不脱标,真实位置是在老家,只不过影子出去了,可以到处飘.3.相对定位用途 ...
网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...
定位组成，相对定位，绝对定位，固定定位、定位的特殊性，脱标的盒子不会触发外边距塌陷，绝对定位（固定定位）会完全压住盒子，焦点图布局（html+css）
定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子. 定位:将盒子定在某一个位置.所以也是在摆放盒子,按照定位的方式移动盒子. 定位=定位模式+边偏移定位模式 ...
定位（定位组成【定位模式（静态定位，相对定位，绝对定位，固定定位，粘性定位，定位总结），位偏移】，）
定位定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子定位也是用来布局的,它有两部分组成: 定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的 ...
css定位详解（相对定位、绝对定位和固定定位）
文章目录一.什么是定位? 二.各个属性值的作用 1.相对定位 2.绝对定位 3.静态定位 4.固定定位三.相对和绝对定位 1.相对定位 2.绝对定位 3.相对定位和绝对定位 (1)相对定位 (2) ...
前端——css相对定位，绝对定位，固定定位
文章目录相对定位 position: relative; 特性用途绝对定位 position: absolute; 绝对定位参考点单独盒子绝对定位参考点: 父辈元素设置了相对定位,则子元素绝对 ...
CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位
目录 1.定位布局 1.1.静态定位( Static positioning) 简单代码实现: - 1.2.什么是相对定位?( Relative positioning ) 简单代码实现: - 1 ...
一键学会三种定位布局，相对定位、绝对定位、固定定位!
定位布局定位属性: position 作用: 指定元素的定位类型取值:static 默认不定位相对定位绝对定位固定定位相对定位关键字 position:relative 特点:相对不脱离文档流 ...

相对定位relative、绝对定位absolute、固定定位fixed

相对定位relative

绝对定位absolute

固定定位fixed

相对定位relative、绝对定位absolute、固定定位fixed相关推荐

最新文章

热门文章