一.相对定位:position:relative;

不脱离文档流,固定在原位置,层级会升高会有覆盖效果

二.绝对定位:position:absolute;

脱离文档流,只是单纯飘起来,不再占据位置
在不设置移动方式时,不会直接移动.
可以实现多个盒子层叠.

1.找参照物

1.父元素有定位时,会以父元素为参照物,脱离文档流不再占有原来的位置.当不给子元素宽度时,会默认以父元素的左右边线为边界.
2.当父元素没有定位时,会逐级往上找到第一个拥有定位的元素作为参照物.
3.如果一直没有,则以body为参照物.

2.移动

当只给上下时,盒子不会左右移动.
同理当只给左右时,盒子上下不会移动.
1.top bottom控制距离参照物上下边界的距离
需要加单位,可以给负数.
2.left right控制距离参照物左右边界的距离
需要加单位,可以给负数.
3.通常情况下只需要给top和left两个数值即可

3.设置层级z-index

设置z-index
1.默认为0
2.当设置为负数时,会显示在文档流的下方,
3.当设置为正数时,会优先显示在上方,
4.数值越大显示的层级越靠上.

三.固定定位position:fixed;

相对于用户的浏览器窗口为参照物,即使用户滑动网页其位置也不会发生变化.常用于随行广告和弹窗.

四.居中

方法1.margin:auto

首先给上下左右均为0,再给margin:auto.
即可实现盒子在参照物居中.

方法2.50%配合margin法

首先给left:50%;
top:50%;
再通过margin-top:-自身盒子一半的高度 ;
margin-left:-自身盒子一半的宽度;
即可实现居中

方法3.cala计算函数

直接给left:calc(50% - 盒子的宽度/2 );
top:calc(50% - 盒子的高度/2);
注意括号内的高度和宽度都需要加单位.
加减前后需要打空格.
乘除不用
注意:在相对定位外无盒子时,以上方法只能水平居中,
外有盒子时,以上方法可以在盒子内居中.

五.粘性定位position:sticky

当滚动条到达一定位置时,设置top为0.实现吸顶效果.

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法相关推荐

相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
服务器安装系统提示无法创建新的系统分区,Win10系统安装时提示无法创建新的系统分区也无法定位现有的分区的三种解决方法...
部分用户在安装Windows10系统时,却遇到"无法创建分区也找不到现有的分区"提示,无法继续安装.这该怎么办呢?对于该问题大家可以参考以下方法来解决. 1.格式化整个硬盘,重新分 ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
实现DIV居中布局三种途径(转)
DIV+CSS布局有很多值得学习的地方,这里和大家描述一下关于DIV居中布局的实现方法,主要有三种方法,每种方法都有各自的特点,请看下文详细介绍,相信通过本文描述你对DIV居中布局一定会有深刻的认识. ...
html中页面整体居中,css实现网页内容整体居中的三种方法总结
下面我们来看一款利用css实现div中内容居中的方法,下面整理了三种css实现网页内容整体居中方法,希望对各位朋友会有所帮助. 例代码如下复制代码 -//W3C//DTD XHTML 1.0 Tr ...
让图片在div里居中（三种方法）
问题当我们将一张 img 放在一个 div 里的时候,具有超高审美的我们,硬是要将 img 居中于 div.所以,产什么以下解决方法. 解决方法布局文件代码 <div class=&quo ...
absolute定位css元素居中的两种方法
1(上下左右居中,不能微调) position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; 2(上下左右居中,可微调) posit ...

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法

一.相对定位:position:relative;

二.绝对定位:position:absolute;

1.找参照物

2.移动

3.设置层级z-index

三.固定定位position:fixed;

四.居中

方法1.margin:auto

方法2.50%配合margin法

方法3.cala计算函数

五.粘性定位position:sticky

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法相关推荐

最新文章

热门文章

相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法

相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法

一.相对定位:position:relative;

二.绝对定位:position:absolute;

1.找参照物

2.移动

3.设置层级z-index

三.固定定位position:fixed;

四.居中

方法1.margin:auto

方法2.50%配合margin法

方法3.cala计算函数

五.粘性定位position:sticky

相对定位 绝对定位 固定定位 粘性定位 居中的三种方法 calc函数标签的使用方法相关推荐

最新文章

热门文章

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法

相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法相关推荐