HTML粘性定位,CSS:position——绝对、相对、固定、粘性定位的简单记录
一、相对定位——relative
有偏移量(left、right、top、bottom)时,元素相对于自身进行偏移,元素不脱离文档流(在原位置还占有空间),不影响其他元素布局。
#one{
width: 50px;
height: 50px;
background: orangered;
border: 1px solid #000;
}
#two{
width: 50px;
height: 50px;
background: hotpink;
border: 1px solid #aaaa7f;
position: relative;
top: 10px;
opacity: 0.5;
}
#three{
width: 50px;
height: 50px;
background: skyblue;
border: 1px solid #5c5c5c;
}
二、绝对定位——absolute
有祖先元素时,当祖先元素有了任一position(绝对、相对、固定),且子元素设置为绝对定位后,子元素相对于当前的祖先元素进行偏移;子元素会脱离文档流(后面的div会覆盖上来);绝对定位使内联元素支持宽高(块特征),使块元素的默认宽根据内容决定(内联特征)。
#father{
width: 250px;
height: 200px;
border: 1px solid #FFD47F;
position: relative;
}
#one{
width: 50px;
height: 50px;
background: orangered;
border: 1px solid #000;
position: absolute;
right: 20px;
top: 0px;
}
#two{
width: 50px;
height: 50px;
background: hotpink;
border: 1px solid #aaaa7f;
opacity: 0.5;
}
#three{
width: 50px;
height: 50px;
background: skyblue;
border: 1px solid #5c5c5c;
}
三、固定定位——fixed
使元素脱离文档流,使内联元素支持宽高,使块元素的默认宽根据内容决定;相对于整个浏览器窗口进行偏移,不受浏览器滚动条影响。
fixed
四、粘性定位——sticky
在指定位置,进行粘性操作。
sticky
HTML粘性定位,CSS:position——绝对、相对、固定、粘性定位的简单记录相关推荐
- [css] position的relative和absolute定位原点是哪里?
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
- css左边定位,CSS Position(定位) | 菜鸟教程
CSS Position(定位) position 属性指定了元素的定位类型. position 属性的五个值: 元素可以使用的顶部,底部,左侧和右侧属性定位.然而,这些属性无法工作,除非是先设定po ...
- CSS定位(position))之sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位. position: sticky; 基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relati ...
- CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位 定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成 定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
- CSS position: sticky; 粘性定位初识
之前所熟知的CSS position 属性值 有relative.absolute.fixed,当然也不能忽略了static(默认)和inherit(继承). 偶然的一次在 MDN:https://d ...
- CSS position(定位)属性
关于CSS position,来自MDN的描述: CSS position属性用于指定一个元素在文档中的定位方式.top.right.bottom.left 属性则决定了该元素的最终位置. 然后来看看 ...
- html相对位置置顶,css定位(position)属性怎么用?
在CSS中,定位(position)属性用于规定元素的定位类型,定义建立元素布局所用的定位机制.下面给大家介绍一下position属性,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
- Canvas+html+css+position定位
定位Position样式 浮动毛病: 会让出文档流,会影响后面的元素的布局. 如果父元素是width:100%,没办法做到均分宽度和间隙,如果父元素是固定宽度情况,可以通过切蛋糕的方式进行计算. 概述 ...
- 【css】CSS position(定位)属性
一.CSS position(定位)属性 absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.元素的位置通过 "left", "t ...
- CSS Position 定位
文章目录 CSS Position 定位 #1 说明 #1.1 什么是Position塌陷 #1.2 什么是文档流(normal flow) #2 开始 #2.1 position: static # ...
最新文章
- 网站推广专员浅析关键词筛选决定网站推广的排名与流量
- 多库共存 包装集的问题 点击按钮创建一个p 几个属性介绍 jQuery的插件
- 【Python CheckiO 题解】Speech Module
- 数据结构之基于Java的链接栈实现
- Python+Selenium FAQ
- Linux内核中的atoi,itoa等函数
- 四川大学计算机网络实验,四川大学计算机网络实验报告
- idea打包jar的多种方式
- 笔记本触摸屏\板使用小技巧,没有鼠标也能轻松使用电脑
- 【OMNeT++】ALOHA协议仿真中的channelUtilization
- 一键seo提交收录_百度网站提交,选择主动提交,还是被动收录?
- JAVA高级视频_IO输入与输出_第一部分(System、Runtime、Date、Calendar、MathRandom、IO输入输出与概述、文件的续写、FileReader、复制文件、)...
- php warning: file_get_contents,解决PHP Warning: file_get_contents failed to open stream
- 仙人掌相关问题的处理方法(未完待续)
- 使用thinkadmin内置WeChatDeveloper发送公众号模板消息
- SQLServer常用的字符串函数
- Arduino人体红外模块控制
- MaxEnt软件的使用
- 计算机管理老是自动打开,win10系统打开设备管理器后一直自动刷新的设置方案...
- 卓朗数字孪生的重要意义